7、React 状态管理：从原理到实践

React 状态管理：从原理到实践

1. React 的更新优化与双场景机制

在 React 中，针对不同类型的元素有不同的更新函数。例如，更新函数组件时会用到 updateFunctionComponent 。同时，React Fiber 对 UI 引擎进行了优化，它不会盲目地更新屏幕。

在首次更新（挂载阶段），每个 fiber 都会被创建，所有 DOM 元素也会从头开始创建，这个过程与传统更新较为接近。但后续的更新则有所不同，React 假设每次更新时只有一小部分屏幕需要调整。在更新屏幕之前，它会遍历上一次更新中存储的所有 fibers，并将它们与新渲染的元素进行比较，这个过程称为协调（reconciliation）。通过协调，React 可以找出本次更新需要应用的 DOM 更改，从而只对屏幕应用必要的更改，提高了更新效率。

此外，为了确保更新工作的高效进行，每个 fiber 都作为一个工作单元。在每次更新时，所有 fibers 会被送入一个管道，逐个进行处理。这样做的好处是，更新工作不再是要么全做要么不做。引擎在资源不足时可以暂停，等有足够的计算时间时再回来完成剩余的工作，从而能对浏览器中更紧急的工作做出快速响应。

React 还采用了双场景机制，即 current 和 workInProgress 。可以将用户屏幕想象成一个有幕布的舞台，面向观众的舞台是当前场景（ current ），幕布后面是正在准备的场景（ workInProgress ）。当观众观看当前场景时，正在准备的场景也在同时进行准备。当时机