18、React开发：Fiber架构与测试工具实践

React开发：Fiber架构与测试工具实践

1. React Fiber架构

1.1 React更新机制概述

在React中，组件可视为返回UI数据的函数。每当数据（如props、state、远程数据等）发生变化时，React会重新渲染组件。例如点击星星对颜色进行评分，我们期望UI能快速更新，这依赖于React的更新机制。

早期很多库的更新方式效率较低，类似于写文章时，若要根据同事建议修改文章，会创建一个全新文档，从头开始输入整篇文章再添加修改内容。而React采用了更高效的方式，当发生变化时，React会将组件树复制为一个JavaScript对象，找出需要改变的部分并仅更新这些部分。例如，对于如下列表：

<ul> 
  <li>blue</li> 
  <li>purple</li> 
  <li>red</li>
</ul>

若要将第三个列表项的颜色从红色更新为绿色，React不会移除第三个 <li> 元素，而是将其文本内容从红色替换为绿色。

1.2 传统更新机制的问题

然而，更新DOM是一个开销较大的同步任务。我们必须等待所有更新完成并渲染后，才能在主线程上执行其他任务。这意味着要等待React递归处理所有更新，可能导致用户体验不流畅。

1.3 React Fiber的解决方案

为解决上述问题，React团队在版本16.0中重写了协