01-React响应式

一、React响应式

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

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

谈一谈React响应式原理（Fiber架构）

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