Open hushicai opened 5 years ago
我们以前可能经常在React组件中执行获取数据、订阅或手动更改DOM等操作，这些其实就是所谓的Side Effect（或简称为Effect），因为它们会影响其他组件，并且无法在渲染过程中完成。
Side Effect
Effect
我们知道大多数state和props更新将导致Side Effect（副作用）。
每个FiberNode都可以拥有与之相关的Effects， 由effectTag字段标识不同Effect，例如Placement、Update、Deletion、Callback等。
effectTag
对于宿主组件（DOM元素），工作包括添加，更新或删除元素；对于类组件，React可能需要更新ref并调用componentDidMount和componentDidUpdate等生命周期方法；当然还存在与其他类型的FiberNode相对应的Effects。
ref
componentDidMount
componentDidUpdate
React在处理更新的过程中，会构建一条Effects List，目的是标记那些具有DOM更新或其他相关Effect的节点。
例如，我们的更新导致c2被插入到DOM中，d2和c1被用于更改属性，而b2被用于激活生命周期方法，Effects List将它们链接在一起，以便React后面可以跳过其他节点：
c2
d2
c1
b2
当遍历节点时，React使用Fiber Tree根节点（HostRoot）的firstEffect指针来确定列表的开始位置。
firstEffect
所以上图可以表示为这样的线性列表：
如您所见，React是从孩子节点到父节点的顺序应用Effects的。
我们以前可能经常在React组件中执行获取数据、订阅或手动更改DOM等操作，这些其实就是所谓的
Side Effect（或简称为Effect），因为它们会影响其他组件，并且无法在渲染过程中完成。我们知道大多数state和props更新将导致
Side Effect（副作用）。每个FiberNode都可以拥有与之相关的Effects， 由
effectTag字段标识不同Effect，例如Placement、Update、Deletion、Callback等。对于宿主组件（DOM元素），工作包括添加，更新或删除元素；对于类组件，React可能需要更新
ref并调用componentDidMount和componentDidUpdate等生命周期方法；当然还存在与其他类型的FiberNode相对应的Effects。React在处理更新的过程中，会构建一条Effects List，目的是标记那些具有DOM更新或其他相关Effect的节点。
例如，我们的更新导致
c2被插入到DOM中，d2和c1被用于更改属性，而b2被用于激活生命周期方法，Effects List将它们链接在一起，以便React后面可以跳过其他节点：当遍历节点时，React使用Fiber Tree根节点（HostRoot）的
firstEffect指针来确定列表的开始位置。所以上图可以表示为这样的线性列表：
如您所见，React是从孩子节点到父节点的顺序应用Effects的。