根据react的virtual dom写的项目
- 用于学习react的virtual dom
虚拟 DOM（Document Object Model）是在库和框架中（如React）使用的一个概念，
- 用于提高更新用户界面（UI）的效率。
- 其核心思想是创建一个轻量级的内存中表示实际 DOM 结构的虚拟表示
- 对这个虚拟表示进行更新，然后基于这些变化高效地更新实际 DOM。
npm run i- development 开启liveserver，配置了sourcemap，方便更好学习
npm run dev- production 混淆压缩代码，没有sourcemap
npm run build可以给dom添加属性(attribute, property),还有绑定事件
const dom = createElement(
"div",
{id: "foo"},
createElement("a", null, "bar"),
createElement("b"),
createElement("button", {
id: "btn",
onClick: (e:Event) => {
console.log(e);
},
}, "button")
)- 初始渲染:
- 当你定义一个React组件并首次渲染时，React会创建UI的虚拟 DOM 表示。
- 这个虚拟表示是一种JavaScript对象的树状结构，它反映了实际 DOM 的结构。
- 变更和协调:
- 当React组件的状态或属性发生变化时，会创建一个新的虚拟 DOM 树。
- React然后执行一个称为“协调”的过程，以确定新旧虚拟 DOM 树之间的差异（差异算法）。这个过程确定了需要更新的UI的部分。
- 最小化 DOM 操作:
- 一旦差异被识别出来，React生成了一组最小的变更，用于更新实际 DOM。
- 这种方法有助于最小化对实际 DOM 的直接操作，而这在性能方面是代价高昂的。
- 批量更新:
- React将多个更新批处理，并在一次遍历中应用它们，以进一步优化性能。这通常使用React Fiber架构等机制来实现。
- 更新实际 DOM:
- 最后，React使用计算出的最小变更集更新实际 DOM。
- 这种更新通常使用高效的技术，例如批处理更新，以及在支持的情况下使用 requestAnimationFrame API。
-
通过使用虚拟 DOM，React旨在提供一种更有效的更新 UI 的方式。它减少了对实际 DOM 的直接操作数量，并有助于改善应用程序的性能，特别是在需要频繁更新 UI 的情况下。
-
请注意，这是一个简化的解释，实际的实现细节可能更复杂。React 的协调算法是确保这一过程高效运行的关键部分，以确保更新以最佳方式执行。
通过节点上的 child（孩子）、return（父）和 sibling （兄弟）属性串联着其他节点，形成了一棵 Fiber Tree (类似Virtual DOM tree) Fiber Tree 是由 Fiber Node 构成的，更像是一个单链表构成的树，便于向上/向下/向兄弟节点转换
// fiber node interface
export interface Fiber{
tag?: string,
type?: string | ((props:FiberProps) => Fiber),
// 单链表树结构
parent?: Fiber,
child?: Fiber | null,
sibling?: Fiber | null,
// 在渲染完成之后他们会交换位置
alternate?: Fiber | null,
// 跟当前Fiber相关本地状态（比如浏览器环境就是DOM节点）
stateNode?: HTMLElement | Text,
props: FiberProps,
partialState?: Fiber | null,
// Effect 相关的
effectTag?: string,
hooks?: [],
dom?: Text | HTMLElement | null,
}
- 组件是React 应用中的基础单元，应用以组件树形式组织，渲染组件；
- Fiber 调和的基础单元则是 fiber（调和单元），应用与 Fiber Tree 形式组织，应用 Fiber 算法；
- 组件树和 fiber 树结构对应，一个组件实例有一个对应的 fiber 实例；
- Fiber 负责整个应用层面的调和，fiber 实例负责对应组件的调和；
- 完成useState钩子
- html转化成javascript对象
- 实现路由
- 实现状态管理redux