React v16 源码分析 ⑨ 组件生命周期

从横向的结构分析, 生命周期包括 Render phase Pre-commit phase Commit phase 这些生命周期是与代码逻辑相符的,很容易找到类型名称的函数调用

纵向的 Mounting Updating Unmounting 是从 DOM 的表现层面划分的,真正对 DOM 的处理分散在上面的不同阶段之中

下面以横向的结构划分,也就是以代码的执行逻辑分析不同阶段的生命周期方法

Render

Render 阶段也就是 Fiber 树 构建的阶段, 对于首次渲染的节点会创建新的 FiberNode, 对于更新的节点会检查是需要新建还是复用

在构建 Fiber 树的过程中,会在每个节点处理之前调用 createWorkInProgress,当发现此节点还没有创建,会调用 createFiber 创建对应的 FiberNode

将 FiberNode 传入 beginWork 按 Fiber 的 tag 类型,调用不同的方法处理, 如果 Fiber 的类型是 class component 会调用 constructClassInstance 实例化

紧接着会执行 getDerivedStateFromProps 或 componentWillMount, 因此这两个生命周期在挂载阶段和更新阶段是都会执行的

function constructClassInstance(workInProgress, ctor, props) {
  var instance = new ctor(props, context);

  if (typeof getDerivedStateFromProps === "function") {
    getDerivedStateFromProps(nextProps, prevState);
  }

  if (typeof instance.componentWillMount === "function") {
    instance.componentWillMount();
  }
}

如果是函数组件则会直接执行

var children = Component(props, secondArg);

实例化类组件之后会执行 finishClassComponent, 在这里会执行类组件的 render 方法

function finishClassComponent() {
  instance.render();
}

如果节点已经挂载过, 类组件会进入更新的逻辑,这里会执行 shouldComponentUpdate 并返回一个 boolean, 用作是否执行 componentWillUpdate() render() componentDidUpdate() 的依据

function updateClassInstance() {
  var shouldUpdate = instance.shouldComponentUpdate(
    newProps,
    newState,
    nextContext
  );
  if (shouldUpdate) {
    if (typeof instance.componentWillUpdate === "function") {
      instance.componentWillUpdate(newProps, newState, nextContext);
    }
    if (typeof instance.componentDidUpdate === "function") {
      workInProgress.flags |= Update;
    }
    if (typeof instance.getSnapshotBeforeUpdate === "function") {
      workInProgress.flags |= Snapshot;
    }
  }
}

Pre-commit

Pre-commit 阶段实际就是 commit 阶段 前半部分

其中 getSnapshotBeforeUpdate 将会被执行

Commit

指的就是 commit 阶段 后半部分

在这个阶段会真实的操作 DOM,并且重新绑定 Ref

可以看到 componentDidMount componentDidUpdate 会在这个阶段执行

其中 commitMutationEffects 阶段会对标记删除的节点执行 commitDeletion, componentWillUnmount 会在这个函数中执行

打赏