title: 状态与副作用

状态与副作用

在前文我们已经分析了fiber树从构造到渲染的关键过程. 本节我们站在fiber对象的视角, 考虑一个具体的fiber节点如何影响最终的渲染.

回顾fiber 数据结构, 并结合前文fiber树构造系列的解读, 我们注意到fiber众多属性中, 有 2 类属性十分关键:

  1. fiber节点的自身状态: 在renderRootSync[Concurrent]阶段, 为子节点提供确定的输入数据, 直接影响子节点的生成.

  2. fiber节点的副作用: 在commitRoot阶段, 如果fiber被标记有副作用, 则副作用相关函数会被(同步/异步)调用.

  1. export type Fiber = {|
  2.   // 1. fiber节点自身状态相关
  3.   pendingProps: any,
  4.   memoizedProps: any,
  5.   updateQueue: mixed,
  6.   memoizedState: any,
  8.   // 2. fiber节点副作用(Effect)相关
  9.   flags: Flags,
  10.   subtreeFlags: Flags, // v17.0.2未启用
  11.   deletions: Array<Fiber> | null, // v17.0.2未启用
  12.   nextEffect: Fiber | null,
  13.   firstEffect: Fiber | null,
  14.   lastEffect: Fiber | null,
  15. |};

状态

与状态相关有 4 个属性:

  1. fiber.pendingProps: 输入属性, 从ReactElement对象传入的 props. 它和fiber.memoizedProps比较可以得出属性是否变动.
  2. fiber.memoizedProps: 上一次生成子节点时用到的属性, 生成子节点之后保持在内存中. 向下生成子节点之前叫做pendingProps, 生成子节点之后会把pendingProps赋值给memoizedProps用于下一次比较.pendingProps和memoizedProps比较可以得出属性是否变动.
  3. fiber.updateQueue: 存储update更新对象的队列, 每一次发起更新, 都需要在该队列上创建一个update对象.
  4. fiber.memoizedState: 上一次生成子节点之后保持在内存中的局部状态.

它们的作用只局限于fiber树构造阶段, 直接影响子节点的生成.

副作用

与副作用相关有 4 个属性:

  1. fiber.flags: 标志位, 表明该fiber节点有副作用(在 v17.0.2 中共定义了28 种副作用).
  2. fiber.nextEffect: 单向链表, 指向下一个副作用 fiber节点.
  3. fiber.firstEffect: 单向链表, 指向第一个副作用 fiber 节点.
  4. fiber.lastEffect: 单向链表, 指向最后一个副作用 fiber 节点.

通过前文fiber树构造我们知道, 单个fiber节点的副作用队列最后都会上移到根节点上. 所以在commitRoot阶段中, react提供了 3 种处理副作用的方式(详见fiber 树渲染).

另外, 副作用的设计可以理解为对状态功能不足的补充.

  • 状态是一个静态的功能, 它只能为子节点提供数据源.
  • 而副作用是一个动态功能, 由于它的调用时机是在fiber树渲染阶段, 故它拥有更多的能力, 能轻松获取突变前快照, 突变后的DOM节点等. 甚至通过调用api发起新的一轮fiber树构造, 进而改变更多的状态, 引发更多的副作用.

外部 api

fiber对象的这 2 类属性, 可以影响到渲染结果, 但是fiber结构始终是一个内核中的结构, 对于外部来讲是无感知的, 对于调用方来讲, 甚至都无需知道fiber结构的存在. 所以正常只有通过暴露api来直接或间接的修改这 2 类属性.

从react包暴露出的api来归纳, 只有 2 类组件支持修改:

本节只讨论使用api的目的是修改fiber的状态和副作用, 进而可以改变整个渲染结果. 本节先介绍 api 与状态和副作用的联系, 有关api的具体实现会在class组件,Hook原理章节中详细分析.

class 组件

  1. class App extends React.Component {
  2.   constructor() {
  3.     this.state = {
  4.       // 初始状态
  5.       a: 1,
  6.     };
  7.   }
  8.   changeState = () => {
  9.     this.setState({ a: ++this.state.a }); // 进入reconciler流程
  10.   };
  12.   // 生命周期函数: 状态相关
  13.   static getDerivedStateFromProps(nextProps, prevState) {
  14.     console.log('getDerivedStateFromProps');
  15.     return prevState;
  16.   }
  18.   // 生命周期函数: 状态相关
  19.   shouldComponentUpdate(newProps, newState, nextContext) {
  20.     console.log('shouldComponentUpdate');
  21.     return true;
  22.   }
  24.   // 生命周期函数: 副作用相关 fiber.flags |= Update
  25.   componentDidMount() {
  26.     console.log('componentDidMount');
  27.   }
  29.   // 生命周期函数: 副作用相关 fiber.flags |= Snapshot
  30.   getSnapshotBeforeUpdate(prevProps, prevState) {
  31.     console.log('getSnapshotBeforeUpdate');
  32.   }
  34.   // 生命周期函数: 副作用相关 fiber.flags |= Update
  35.   componentDidUpdate() {
  36.     console.log('componentDidUpdate');
  37.   }
  39.   render() {
  40.     // 返回下级ReactElement对象
  41.     return <button onClick={this.changeState}>{this.state.a}</button>;
  42.   }
  43. }

  1. 状态相关: fiber树构造阶段.

    1. 构造函数: constructor实例化时执行, 可以设置初始 state, 只执行一次.
    2. 生命周期: getDerivedStateFromProps在fiber树构造阶段(renderRootSync[Concurrent])执行, 可以修改 state(链接).
    3. 生命周期: shouldComponentUpdate在, fiber树构造阶段(renderRootSync[Concurrent])执行, 返回值决定是否执行 render(链接).

  2. 副作用相关: fiber树渲染阶段.

    1. 生命周期: getSnapshotBeforeUpdate在fiber树渲染阶段(commitRoot->commitBeforeMutationEffects->commitBeforeMutationEffectOnFiber)执行(链接).
    2. 生命周期: componentDidMount在fiber树渲染阶段(commitRoot->commitLayoutEffects->commitLayoutEffectOnFiber)执行(链接).
    3. 生命周期: componentDidUpdate在fiber树渲染阶段(commitRoot->commitLayoutEffects->commitLayoutEffectOnFiber)执行(链接).

可以看到, 官方api提供的class组件生命周期函数实际上也是围绕fiber树构造和fiber树渲染来提供的.

function 组件

注: function组件与class组件最大的不同是: class组件会实例化一个instance所以拥有独立的局部状态; 而function组件不会实例化, 它只是被直接调用, 故无法维护一份独立的局部状态, 只能依靠Hook对象间接实现局部状态(有关更多Hook实现细节, 在Hook原理章节中详细讨论).

在v17.0.2中共定义了14 种 Hook, 其中最常用的useState, useEffect, useLayoutEffect等

  1. function App() {
  2.   // 状态相关: 初始状态
  3.   const [a, setA] = useState(1);
  4.   const changeState = () => {
  5.     setA(++a); // 进入reconciler流程
  6.   };
  8.   // 副作用相关: fiber.flags |= Update | Passive;
  9.   useEffect(() => {
  10.     console.log(`useEffect`);
  11.   }, []);
  13.   // 副作用相关: fiber.flags |= Update;
  14.   useLayoutEffect(() => {
  15.     console.log(`useLayoutEffect`);
  16.   }, []);
  18.   // 返回下级ReactElement对象
  19.   return <button onClick={changeState}>{a}</button>;
  20. }
  1. 状态相关: fiber树构造阶段.
    1. useState在fiber树构造阶段(renderRootSync[Concurrent])执行, 可以修改Hook.memoizedState.
  2. 副作用相关: fiber树渲染阶段.
    1. useEffect在fiber树渲染阶段(commitRoot->commitBeforeMutationEffects->commitBeforeMutationEffectOnFiber)执行(注意是异步执行, 链接).
    2. useLayoutEffect在fiber树渲染阶段(commitRoot->commitLayoutEffects->commitLayoutEffectOnFiber->commitHookEffectListMount)执行(同步执行, 链接).

细节与误区

这里有 2 个细节:

  1. useEffect(function(){}, [])中的函数是异步执行, 因为它经过了调度中心(具体实现可以回顾调度原理).
  2. useLayoutEffect和Class组件中的componentDidMount,componentDidUpdate从调用时机上来讲是等价的, 因为他们都在commitRoot->commitLayoutEffects函数中被调用.
    • 误区: 虽然官网文档推荐尽可能使用标准的 useEffect 以避免阻塞视觉更新 , 所以很多开发者使用useEffect来代替componentDidMount,componentDidUpdate是不准确的, 如果完全类比, useLayoutEffect比useEffect更符合componentDidMount,componentDidUpdate的定义.

为了验证上述结论, 可以查看codesandbox 中的例子.

总结

本节从fiber视角出发, 总结了fiber节点中可以影响最终渲染结果的 2 类属性(状态和副作用).并且归纳了class和function组件中, 直接或间接更改fiber属性的常用方式. 最后从fiber树构造和渲染的角度对class的生命周期函数与function的Hooks函数进行了比较.