reacr渲染原理和响应式原理

react渲染原理（fiber）

react 组件的渲染（更新）流程，由两个阶段构成，一个是render阶段，一个是commit阶段。

• render阶段：目标是生成fiber树，这个过程是异步的、可中断的，并且不执行任何副作用。中不中断，得看浏览器主线程的脸色。
• commit阶段：目标是把协调运算的结果，一次性提交渲染或更新成真实dom。这个过程在react17中是不可中断的。在react18中可以人为中断（由startTransition进行中断）。

react响应式原理

• 什么是fiber单元？ 每一个jsx元素都是一个fiber单元（React.createElement() 的返回值）
• 这些独立的fiber单元，怎么串联成fiber树？ 给每个fiber单元添加三个指针（child、sibing、parent）
• 为什么react要把构建这个复杂的fiber树？ 为了让协调运算commit阶段可以循环运行，而不是递归。
• 怎么执行协调运算？每个fiber单元上，还有一个alternater指针，指向旧的fiber中的自己。如果新fiber树中存在，但旧fiber树不存在，说明是新增节点；如果新fiber树中不存在，旧fiber树存在，说明这个节点是要删除的节点；如果新旧fiber树中都存在这个节点，则进一步遍历新旧节点的属性，对比它们的变化情况。