React 源码漂流记：React 调和器核心源码解读（四）

if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    if (oldProps !== newProps) {
      // 如果有 props 变化，则标记接收到更新
      didReceiveUpdate = true;
    } else {
      // ......
      didReceiveUpdate = false;
    }
  } else {
    didReceiveUpdate = false;
    // ......
  }

// src/react/packages/react-reconciler/src/ReactFiberBeginWork.new.js
function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
): Fiber | null {
  switch (workInProgress.tag) {
    case IndeterminateComponent: 
      return mountIndeterminateComponent(/*......*/);
    case LazyComponent: 
      return mountLazyComponent(/*......*/);
    case FunctionComponent: 
      return updateFunctionComponent(/*......*/);
    case ClassComponent: 
      return updateClassComponent(/*......*/);
    case HostRoot:
      return updateHostRoot(/*......*/);
    case HostComponent:
      return updateHostComponent(/*......*/);
    case HostText:
      return updateHostText(/*......*/);
    case SuspenseComponent:
      return updateSuspenseComponent(/*......*/);
    case HostPortal:
      return updatePortalComponent(/*......*/);
    case ForwardRef: 
      return updateForwardRef(/*......*/);
    case Fragment:
      return updateFragment(/*......*/);
    // ......
    case ContextProvider:
      return updateContextProvider(/*......*/);
    case ContextConsumer:
      return updateContextConsumer(/*......*/);
    case MemoComponent: 
      return updateMemoComponent(/*......*/);
    case SimpleMemoComponent: 
      return updateSimpleMemoComponent(/*......*/);
    case IncompleteClassComponent: 
      return mountIncompleteClassComponent(/*......*/);
    // ......
    case OffscreenComponent: 
      return updateOffscreenComponent(/*......*/);
    // ......
  }
}

// src/react/packages/react-reconciler/src/ReactFiberBeginWork.new.js
function mountIndeterminateComponent(
  _current,
  workInProgress,
  Component,
  renderLanes,
) {
  // ......
  const props = workInProgress.pendingProps;
  // 清理 workInProgress context，即 workInProgress.dependencies.firstContext = null
  prepareToReadContext(workInProgress, renderLanes);
  // 执行 Component 并获得返回值，如果是类组件，value 是组件实例
  const value = Component(props, context)

  // 判断是否是合法的类组件
  if (
    typeof value === 'object' &&
    value !== null &&
    typeof value.render === 'function' &&
    value.$$typeof === undefined
  ) {
    // 将 workInProgress 标记为类组件
    workInProgress.tag = ClassComponent;
    workInProgress.updateQueue = null;
    // ......
    // 更新 state
    workInProgress.memoizedState =
      value.state !== null && value.state !== undefined ? value.state : null;
    // 初始化 state 更新队列
    initializeUpdateQueue(workInProgress);
    // 将类组件实例设置到 workInProgress Fiber 上
    adoptClassInstance(workInProgress, value);
    // 挂载类组件实例，触发 `getDerivedStateFromProps` 和 `componentWillMount`
    mountClassInstance(workInProgress, Component, props, renderLanes);
    // 调和 ReactElement
    return finishClassComponent(
      null,
      workInProgress,
      Component,
      true,
      false,
      renderLanes,
    );
  } else {
    // 将 workInProgress 标记为 FunctionComponent
    workInProgress.tag = FunctionComponent;
    // ......
    // 调和 ReactElement
    reconcileChildren(null, workInProgress, value, renderLanes);
    // 返回 child 节点
    return workInProgress.child;
  }
}

function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderLanes,
) {
  // ......
  // 获取 ReactChildren
  const nextChildren = renderWithHooks(
    current,
    workInProgress,
    Component,
    nextProps,
    undefined,
    renderLanes,
  );
  // 如果非初次渲染且未接收到更新则复用 Fiber 节点，提前退出
  if (current !== null && !didReceiveUpdate) {
    bailoutHooks(current, workInProgress, renderLanes);
    // 调用 `cloneChildFibers` 复用节点，返回 child 节点
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }
  // ......
  // 调和 ReactChildren
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}

function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps: any,
  renderLanes: Lanes,
) {
  // ......
  // 获取类组件实例
  const instance = workInProgress.stateNode;
  let shouldUpdate;
  if (instance === null) {
    // ......
    // 若实例尚未创建，则构建组件实例，new Component(props, context)
    constructClassInstance(workInProgress, Component, nextProps);
    // 挂载组件，调用相关生命周期钩子
    mountClassInstance(workInProgress, Component, nextProps, renderLanes);
    shouldUpdate = true;
  } else if (current === null) {
    // 应用加载时，如果已经有组件实例，则复用此实例，并且调用相关的生命周期钩子 `componentWillReceiveProps`、`getDerivedStateFromProps`
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  } else {
    // 如果在更新阶段，且已经有组件实例，则更新组件实例，并且调用相关的生命周期函数 `componentWillReceiveProps`、`getDerivedStateFromProps`，同时更新实例的 props, state 和 context
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderLanes,
    );
  }
  // 根据 shouldUpdate 决定是否需要复用节点，reconcileChildren 或者 cloneChildFibers，并返回子节点
  const nextUnitOfWork = finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    false,
    renderLanes,
  );
  // ......
  return nextUnitOfWork;
}

function updateHostRoot(current, workInProgress, renderLanes) {
  // ......
  const nextProps = workInProgress.pendingProps;
  const prevChildren = workInProgress.memoizedState.element;
  // 从 current 上复制 updateQueue 到 workInProgress
  cloneUpdateQueue(current, workInProgress);
  // 消费 workInProgress 上的 updateQueue 更新 workInProgress.memoizedState
  processUpdateQueue(workInProgress, nextProps, null, renderLanes);
  const nextChildren = workInProgress.memoizedState.element;
  // 判断消费 updateQueue 之后 children 是否发生了变化，如果没有发生变化则复用节点，否则重新调和子树，并返回子节点
  if (nextChildren === prevChildren) {
    // ......
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }
  // ......
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  // ...... 
  return workInProgress.child;
}

function updateHostComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  renderLanes: Lanes,
) {
  // ......
  const type = workInProgress.type;
  const nextProps = workInProgress.pendingProps;
  const prevProps = current !== null ? current.memoizedProps : null;
  let nextChildren = nextProps.children;
  // 判断该节点是否应该直接设置文本内容，如 textarea, noscript 等，对于此类节点不需要再建立 nextChildren 
  // 为 HostText 以节省性能
  const isDirectTextChild = shouldSetTextContent(type, nextProps);

  if (isDirectTextChild) {
    nextChildren = null;
  // 如果原节点存在，原来是 DirectTextChild，现在不是了，标记 ContentReset，表示重置文本内容
  } else if (prevProps !== null && shouldSetTextContent(type, prevProps)) {
    workInProgress.flags |= ContentReset;
  }
  // ......
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}

function updateHostText(current, workInProgress) {
  // ......
  return null;
}

function TestIndeterminateComponent() {
  return {
    componentDidMount() {
      console.log('componentDidMount')
    },
    state: { count: 1 },
    updateCount() {
     const { count } = this.state;
     this.updater.enqueueSetState(
      this,
      { count: count + 1 },
      undefined,
      "setState"
     );
    },
    render() {
     return <div onClick={() => this.updateCount()}>{this.state.count}</div>;
    },
  };
}