虚拟DOM其实就是用JavaScript对象表示的一个DOM节点, 内部包含了节点的 tag , props 和 children .为何使用虚拟DOM?...因为直接操作真实DOM繁琐且低效, 通过虚拟DOM, 将一部分昂贵的浏览器重绘工作转移到相对廉价的存储和计算资源上.1.2 如何将JSX转换成虚拟DOM?...DOM对象中可以得知: 虚拟DOM树的每个节点通过 children 属性构成了一个嵌套的树结构, 这意味着要以递归的形式遍历和比较新旧虚拟DOM树.2.1节的策略解决了Diffing算法的时间复杂度的问题..., 但我们还面临着另外一个重大的性能问题——浏览器的渲染线程和JS的执行线程是互斥的, 这意味着DOM节点过多时, 虚拟DOM树的构建和处理会长时间占用主线程, 使得一些需要高优先级处理的操作如用户输入...在Fiber架构下, 每个Fiber节点就是一个工作单元.在以下示例代码中, 我们使用浏览器提供的 requestIdleCallback 方法演示这个过程, 它会在浏览器空闲时执行一个workLoop