React Effects List大重构,是为了他?

大家好,我卡颂。

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

阅读完本文,你可以掌握React18对比之前版本,Suspense特性的差异及原因。

欢迎加入人类高质量前端框架群,带飞

什么是副作用

简易的React工作原理可以概括为:

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

副作用包含很多类型,比如:

  • PlacementDOM节点的插入与移动
  • PassiveuseEffect回调执行
  • ChildDeletion指移除子DOM节点
  • 等等

更新造成DOM变化主要就是PlacementChildDeletion在起作用。

那么render阶段如何保存副作用commit阶段又是如何使用副作用的呢?

Effects List

在重构前,render阶段,带有副作用的节点会连接形成链表,这条链表被称为Effects List

比如下图,B、C、E存在副作用,连接形成Effects List

React Effects List大重构,是为了他?_第1张图片

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

SubtreeFlags

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

比如B、C、E包含的副作用如下图:

React Effects List大重构,是为了他?_第2张图片

冒泡流程如下:

  1. B的副作用Passive,冒泡到A,A.SubtreeFlags包含Passive
  2. E的副作用Placement,冒泡到D,D.SubtreeFlags包含Placement
  3. D冒泡到C,C.SubtreeFlags包含Placement
  4. C的副作用UpdateC.SubtreeFlags包含Placement,C冒泡到A
  5. 最终A.SubtreeFlags包含PassivePlacementUpdate

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

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

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

Suspense

答案是:SubtreeFlags遍历子树的操作虽然比Effects List需要遍历更多节点,但是React18中一种新特性恰恰需要遍历子树

这个特性就是Suspense

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

考虑如下组件:

loading...}>
  
  

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

Sibling代码如下:

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

  return 

Sibling

; }

由于Suspense会等待子孙组件中的异步请求完毕后再渲染,所以当代码运行时页面首先会渲染fallback

loading...

但是Sibling并不是异步的!这里就体现了新旧版本React的差异。

新旧版React的差异

再回顾下开篇介绍的简易React工作原理:

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

在开启并发之前,React保证一次render阶段对应一次commit阶段

所以在上例中,虽然由于LazyCpn在请求导致Suspense渲染fallback,但是并不会阻止Sibling渲染,也不会阻止SiblinguseEffect的执行。

控制台还是会打印Sibling effect

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

React Effects List大重构,是为了他?_第3张图片

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

所以在新版中,针对Suspense不显示的子树做了单独的处理,既不会渲染display: none的内容,也不会执行useEffect回调:

要实现这部分处理的基础,就是改变commit阶段遍历的方式,也就回到开篇提到的Effects List重构为subtreeFlags

你可以从这个 在线Demo直观的感受新旧版 Suspense的差异

总结

今天我们又学到了一个React源码小知识。

值得一提的是,针对Suspense的这次改进,为React带来一种新的内部组件类型 —— Offscreen Component

未来他可能是实现Reactkeep-alive的基础。

你可能感兴趣的:(React Effects List大重构,是为了他?)