大家好，我卡颂。

本文咱们来看React外部Effects List机制重构的前因后果。

浏览完本文，你能够把握React18比照之前版本，Suspense个性的差别及起因。

欢送退出人类高质量前端框架群，带飞

什么是副作用

繁难的React工作原理能够概括为：

  1. 触发更新
  2. render阶段：计算更新会造成的副作用
  3. commit阶段：执行副作用

副作用蕴含很多类型，比方：

  • Placement指DOM节点的插入与挪动
  • Passive指useEffect回调执行
  • ChildDeletion指移除子DOM节点
  • 等等

更新造成DOM变动次要就是Placement、ChildDeletion在起作用。

那么render阶段如何保留副作用，commit阶段又是如何应用副作用的呢？

Effects List

在重构前，render阶段，带有副作用的节点会连贯造成链表，这条链表被称为Effects List。

比方下图，B、C、E存在副作用，连贯造成Effects List：

commit阶段不须要从A向下遍历整棵树，只须要遍历Effects List就能找到所有有副作用的节点并执行对应操作。

SubtreeFlags

在重构之后，会将子节点的副作用冒泡到父节点的SubtreeFlags属性。

比方B、C、E蕴含的副作用如下图：

冒泡流程如下：

  1. B的副作用为Passive，冒泡到A，A.SubtreeFlags蕴含Passive
  2. E的副作用为Placement，冒泡到D，D.SubtreeFlags蕴含Placement
  3. D冒泡到C，C.SubtreeFlags蕴含Placement
  4. C的副作用为Update，C.SubtreeFlags蕴含Placement，C冒泡到A
  5. 最终A.SubtreeFlags蕴含Passive、Placement、Update

这就代表A的子树中蕴含这三种副作用。

在commit阶段，再依据SubtreeFlags一层层查找有副作用的节点并执行对应操作。

可见，SubtreeFlags须要遍历树，而Effects List只须要遍历链表，效率更高。那么React为什么要重构呢？

Suspense

答案是：SubtreeFlags遍历子树的操作尽管比Effects List须要遍历更多节点，然而React18中一种新个性恰好须要遍历子树。

这个个性就是Suspense。

Suspense是v16就提供的性能，但v18之后，当开启并发性能，Suspense与之前版本的行为是有区别的。

思考如下组件：

<Suspense fallback={<h3>loading...</h3>}>  <LazyCpn />  <Sibling /></Suspense>

其中LazyCpn是应用React.lazy包裹的异步加载组件。

Sibling代码如下：

function Sibling() {  useEffect(() => {    console.log("Sibling effect");  }, []);  return <h1>Sibling</h1>;}

因为Suspense会期待子孙组件中的异步申请结束后再渲染，所以当代码运行时页面首先会渲染fallback：

<h3>loading...</h3>

然而Sibling并不是异步的！这里就体现了新旧版本React的差别。

新旧版React的差别

再回顾下开篇介绍的繁难React工作原理：

  1. 触发更新
  2. render阶段：协调器计算更新会造成的副作用
  3. commit阶段：渲染器执行副作用

在开启并发之前，React保障一次render阶段对应一次commit阶段。

所以在上例中，尽管因为LazyCpn在申请导致Suspense渲染fallback，然而并不会阻止Sibling渲染，也不会阻止Sibling中useEffect的执行。

控制台还是会打印Sibling effect。

同时，为了在视觉上显得Sibling没有渲染，Sibling渲染的DOM节点会被设置display: none：

但这其实挺hack的。毕竟依据Suspense的理念，如果子孙组件有异步加载的内容，那应该只渲染fallback（而不是同时渲染display: none的内容）

所以在新版中，针对Suspense内不显示的子树做了独自的解决，既不会渲染display: none的内容，也不会执行useEffect回调：

要实现这部分解决的根底，就是扭转commit阶段遍历的形式，也就回到开篇提到的Effects List重构为subtreeFlags。

你能够从这个在线Demo直观的感触新旧版Suspense的差别

总结

明天咱们又学到了一个React源码小常识。

值得一提的是，针对Suspense的这次改良，为React带来一种新的外部组件类型 —— Offscreen Component。

将来他可能是实现React版keep-alive的根底。