React16源码: React中的updateClassComponent的源码实现

ClassComponent 的更新

1 ) 概述

  • 在 react 中 class component,是一个非常重要的角色
  • 它承担了 react 中 更新整个应用的API
    • setState
    • forceUpdate
  • 在react当中,只有更新了state之后,整个应用才会重新进行渲染
  • 在 class component 中, 它的逻辑相对复杂

2 )源码

packages/react-reconciler/src/ReactFiberBeginWork.js

js 复制代码
// 这个方法就是更新 ClassComponent 组件的一个过程
function updateClassComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  nextProps,
  renderExpirationTime: ExpirationTime,
) {
  // Push context providers early to prevent context stack mismatches.
  // During mounting we don't know the child context yet as the instance doesn't exist.
  // We will invalidate the child context in finishClassComponent() right after rendering.
  // 先跳过 context 相关的逻辑
  let hasContext;
  if (isLegacyContextProvider(Component)) {
    hasContext = true;
    pushLegacyContextProvider(workInProgress);
  } else {
    hasContext = false;
  }
  prepareToReadContext(workInProgress, renderExpirationTime);

  // instance 就是我们 class component,通过new这个class获取的一个对象
  const instance = workInProgress.stateNode;
  // 在这里面,它声明了一个 shouldUpdate 的一个属性
  let shouldUpdate; 
  // 先判断instance是否存在, 比如说我们第一次通过 ReactDOM.render 进行渲染的过程当中
  // 在从上往下第一次渲染的过程当中,第一次更新到 class component 的时候
  // 它的instance肯定是不存在的,因为它还没有被更新过,所以它的节点肯定是没有被创建的
  if (instance === null) {
    // 接下去, 判断一下current是否等于null
    // current等于null的情况是代表在进入第一次渲染,因为current它还不存在
    // 如果current不等于null, 代表我们至少已经经历过一次渲染了
    // 这时候 instance 不存在,而 current 存在,说明第一次渲染的时候没有创建这个instance
    // 同样说明这个组件是被 suspended 的,一个组件处于suspended的状态
    // 在这里react认为它相当于是第一次被渲染, 在初次渲染的时候,只是抛出了一个promise
    // 并没有真正的渲染出它的子节点, 抛出了一个promise之后,接下去的渲染就结束了
    if (current !== null) {
      // An class component without an instance only mounts if it suspended
      // inside a non- concurrent tree, in an inconsistent state. We want to
      // tree it like a new mount, even though an empty version of it already
      // committed. Disconnect the alternate pointers.
      current.alternate = null;
      workInProgress.alternate = null;
      // Since this is conceptually a new fiber, schedule a Placement effect
      workInProgress.effectTag |= Placement;
    }
    // In the initial pass we might need to construct the instance.
    // 对于没有instance的一个情况,需要去创建 class instance
    constructClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    // 并且要mount这个 class instance
    mountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
    // 在第一次渲染的时候,会执行上述两个方法,并且 shouldUpdate = true;
    shouldUpdate = true;
  } else if (current === null) {
    // In a resume, we'll already have an instance we can reuse.
    // 在 有instance 和 没有 current 的情况下,这种是之前被中断的
    // 在执行 class component 的 render 方法的时候 报错,但 instance 已被创建
    // 代表着可以复用 instance
    shouldUpdate = resumeMountClassInstance(
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  } else {
    // 对于又有 current 又有 instance的情况,说明组件已经被重新渲染了
    // 这个 updateClassInstance 方法和 上述 resumeMountClassInstance 类似
    // 最大的区别是 内部判断 comonentDidUpdate 
    shouldUpdate = updateClassInstance(
      current,
      workInProgress,
      Component,
      nextProps,
      renderExpirationTime,
    );
  }
  // 这里最终调用 finishClassComponent
  return finishClassComponent(
    current,
    workInProgress,
    Component,
    shouldUpdate,
    hasContext,
    renderExpirationTime,
  );
}
  • 进入 constructClassInstance

    js 复制代码
    function constructClassInstance(
      workInProgress: Fiber,
      ctor: any,
      props: any,
      renderExpirationTime: ExpirationTime,
    ): any {
      // 先跳过 context 相关
      let isLegacyContextConsumer = false;
      let unmaskedContext = emptyContextObject;
      let context = null;
      const contextType = ctor.contextType;
      // 
      if (typeof contextType === 'object' && contextType !== null) {
        // 跳过 DEV
        if (__DEV__) {
          if (
            contextType.$$typeof !== REACT_CONTEXT_TYPE &&
            !didWarnAboutInvalidateContextType.has(ctor)
          ) {
            didWarnAboutInvalidateContextType.add(ctor);
            warningWithoutStack(
              false,
              '%s defines an invalid contextType. ' +
                'contextType should point to the Context object returned by React.createContext(). ' +
                'Did you accidentally pass the Context.Provider instead?',
              getComponentName(ctor) || 'Component',
            );
          }
        }
    
        context = readContext((contextType: any));
      } else {
        unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
        const contextTypes = ctor.contextTypes;
        isLegacyContextConsumer =
          contextTypes !== null && contextTypes !== undefined;
        context = isLegacyContextConsumer
          ? getMaskedContext(workInProgress, unmaskedContext)
          : emptyContextObject;
      }
    
      // Instantiate twice to help detect side-effects.
      if (__DEV__) {
        if (
          debugRenderPhaseSideEffects ||
          (debugRenderPhaseSideEffectsForStrictMode &&
            workInProgress.mode & StrictMode)
        ) {
          new ctor(props, context); // eslint-disable-line no-new
        }
      }
    
      // ctor 是 construct 的一个缩写 这个 ctor 就是在 ReactElement当中
      // 存在的那个type,也就是 class component 定义的那个class
      // 传入 props和context,对应于 ReactBaseClasses.js 里面,Component 函数 接收的这两个参数
      // 第三个参数 updater 后面在 adoptClassInstance 里面设置
      const instance = new ctor(props, context);
      // 获取 state
      const state = (workInProgress.memoizedState =
        instance.state !== null && instance.state !== undefined
          ? instance.state
          : null);
      adoptClassInstance(workInProgress, instance);
    
      if (__DEV__) {
        if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
          const componentName = getComponentName(ctor) || 'Component';
          if (!didWarnAboutUninitializedState.has(componentName)) {
            didWarnAboutUninitializedState.add(componentName);
            warningWithoutStack(
              false,
              '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
                '%s. This is not recommended. Instead, define the initial state by ' +
                'assigning an object to `this.state` in the constructor of `%s`. ' +
                'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.',
              componentName,
              instance.state === null ? 'null' : 'undefined',
              componentName,
            );
          }
        }
    
        // If new component APIs are defined, "unsafe" lifecycles won't be called.
        // Warn about these lifecycles if they are present.
        // Don't warn about react-lifecycles-compat polyfilled methods though.
        if (
          typeof ctor.getDerivedStateFromProps === 'function' ||
          typeof instance.getSnapshotBeforeUpdate === 'function'
        ) {
          let foundWillMountName = null;
          let foundWillReceivePropsName = null;
          let foundWillUpdateName = null;
          if (
            typeof instance.componentWillMount === 'function' &&
            instance.componentWillMount.__suppressDeprecationWarning !== true
          ) {
            foundWillMountName = 'componentWillMount';
          } else if (typeof instance.UNSAFE_componentWillMount === 'function') {
            foundWillMountName = 'UNSAFE_componentWillMount';
          }
          if (
            typeof instance.componentWillReceiveProps === 'function' &&
            instance.componentWillReceiveProps.__suppressDeprecationWarning !== true
          ) {
            foundWillReceivePropsName = 'componentWillReceiveProps';
          } else if (
            typeof instance.UNSAFE_componentWillReceiveProps === 'function'
          ) {
            foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
          }
          if (
            typeof instance.componentWillUpdate === 'function' &&
            instance.componentWillUpdate.__suppressDeprecationWarning !== true
          ) {
            foundWillUpdateName = 'componentWillUpdate';
          } else if (typeof instance.UNSAFE_componentWillUpdate === 'function') {
            foundWillUpdateName = 'UNSAFE_componentWillUpdate';
          }
          if (
            foundWillMountName !== null ||
            foundWillReceivePropsName !== null ||
            foundWillUpdateName !== null
          ) {
            const componentName = getComponentName(ctor) || 'Component';
            const newApiName =
              typeof ctor.getDerivedStateFromProps === 'function'
                ? 'getDerivedStateFromProps()'
                : 'getSnapshotBeforeUpdate()';
            if (!didWarnAboutLegacyLifecyclesAndDerivedState.has(componentName)) {
              didWarnAboutLegacyLifecyclesAndDerivedState.add(componentName);
              warningWithoutStack(
                false,
                'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
                  '%s uses %s but also contains the following legacy lifecycles:%s%s%s\n\n' +
                  'The above lifecycles should be removed. Learn more about this warning here:\n' +
                  'https://fb.me/react-async-component-lifecycle-hooks',
                componentName,
                newApiName,
                foundWillMountName !== null ? `\n  ${foundWillMountName}` : '',
                foundWillReceivePropsName !== null
                  ? `\n  ${foundWillReceivePropsName}`
                  : '',
                foundWillUpdateName !== null ? `\n  ${foundWillUpdateName}` : '',
              );
            }
          }
        }
      }
    
      // Cache unmasked context so we can avoid recreating masked context unless necessary.
      // ReactFiberContext usually updates this cache but can't for newly-created instances.
      if (isLegacyContextConsumer) {
        cacheContext(workInProgress, unmaskedContext, context);
      }
    
      return instance;
    }
    • 进入 adoptClassInstance

      js 复制代码
      function adoptClassInstance(workInProgress: Fiber, instance: any): void {
        instance.updater = classComponentUpdater; // 挂载 update 方法
        workInProgress.stateNode = instance; // instance 挂载到 stateNode 以供下次进来时使用,下次进来就会存在了
        // The instance needs access to the fiber so that it can schedule updates
        ReactInstanceMap.set(instance, workInProgress);
        if (__DEV__) {
          instance._reactInternalInstance = fakeInternalInstance;
        }
      }
    • 进入 ReactInstanceMap 这个就是对 instance 上 _reactInternalFiber 属性的设置

      js 复制代码
      export function remove(key) {
        key._reactInternalFiber = undefined;
      }
      
      export function get(key) {
        return key._reactInternalFiber;
      }
      
      export function has(key) {
        return key._reactInternalFiber !== undefined;
      }
      
      export function set(key, value) {
        key._reactInternalFiber = value;
      }
      • 这也意味着,通过 this._reactInternalFiber 就可以拿到当前 fiber 对象
  • 进入 mountClassInstance

    js 复制代码
    // Invokes the mount life-cycles on a previously never rendered instance.
    function mountClassInstance(
      workInProgress: Fiber,
      ctor: any,
      newProps: any,
      renderExpirationTime: ExpirationTime,
    ): void {
      if (__DEV__) {
        checkClassInstance(workInProgress, ctor, newProps);
      }
      
      const instance = workInProgress.stateNode;
      instance.props = newProps;
      instance.state = workInProgress.memoizedState;
      instance.refs = emptyRefsObject;
    
      const contextType = ctor.contextType;
      if (typeof contextType === 'object' && contextType !== null) {
        instance.context = readContext(contextType);
      } else {
        const unmaskedContext = getUnmaskedContext(workInProgress, ctor, true);
        instance.context = getMaskedContext(workInProgress, unmaskedContext);
      }
    
      if (__DEV__) {
        if (instance.state === newProps) {
          const componentName = getComponentName(ctor) || 'Component';
          if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
            didWarnAboutDirectlyAssigningPropsToState.add(componentName);
            warningWithoutStack(
              false,
              '%s: It is not recommended to assign props directly to state ' +
                "because updates to props won't be reflected in state. " +
                'In most cases, it is better to use props directly.',
              componentName,
            );
          }
        }
    
        if (workInProgress.mode & StrictMode) {
          ReactStrictModeWarnings.recordUnsafeLifecycleWarnings(
            workInProgress,
            instance,
          );
    
          ReactStrictModeWarnings.recordLegacyContextWarning(
            workInProgress,
            instance,
          );
        }
    
        if (warnAboutDeprecatedLifecycles) {
          ReactStrictModeWarnings.recordDeprecationWarnings(
            workInProgress,
            instance,
          );
        }
      }
    
      // 获取 updateQueue,初次渲染这个 updateQueue 是空的
      // 对于有 setState 的情况,它的 updateQueen 里面可能有多个update
      // 这个时候, 需要调用这个 updateQueen 来去得到一个新的state
      let updateQueue = workInProgress.updateQueue;
      if (updateQueue !== null) {
        // 这里 计算出新的state 并赋值给 workInProgress.memoizedState
        processUpdateQueue(
          workInProgress,
          updateQueue,
          newProps,
          instance,
          renderExpirationTime,
        );
        // 同时更新 instance.state
        instance.state = workInProgress.memoizedState;
      }
      
      // 判断是否有这个生命周期方法
      const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
      if (typeof getDerivedStateFromProps === 'function') {
        // 如果存在该生命周期方法,则计算新的state
        // 这个生命周期会在组件更新的过程中被调用
        applyDerivedStateFromProps(
          workInProgress,
          ctor,
          getDerivedStateFromProps,
          newProps,
        );
        instance.state = workInProgress.memoizedState;
      }
    
      // In order to support react-lifecycles-compat polyfilled components,
      // Unsafe lifecycles should not be invoked for components using the new APIs.
      // 判断是否有 componentWillMount 生命周期方法
      // 在这个生命周期方法中,会执行 setState 方法
      if (
        typeof ctor.getDerivedStateFromProps !== 'function' &&
        typeof instance.getSnapshotBeforeUpdate !== 'function' &&
        (typeof instance.UNSAFE_componentWillMount === 'function' ||
          typeof instance.componentWillMount === 'function')
      ) {
        // 
        callComponentWillMount(workInProgress, instance);
        // If we had additional state updates during this life-cycle, let's
        // process them now.
        // 执行了 这个生命周期方法,就需要重新执行 updateQueue
        // 如果在这时执行了 setState, 立马被反映到组件上面
        updateQueue = workInProgress.updateQueue;
        if (updateQueue !== null) {
          processUpdateQueue(
            workInProgress,
            updateQueue,
            newProps,
            instance,
            renderExpirationTime,
          );
          instance.state = workInProgress.memoizedState;
        }
      }
    
      if (typeof instance.componentDidMount === 'function') {
        workInProgress.effectTag |= Update;
      }
    }
    • 进入 processUpdateQueue

      js 复制代码
      export function processUpdateQueue<State>(
        workInProgress: Fiber,
        queue: UpdateQueue<State>,
        props: any,
        instance: any,
        renderExpirationTime: ExpirationTime,
      ): void {
        hasForceUpdate = false;
        // 克隆 updateQueue
        queue = ensureWorkInProgressQueueIsAClone(workInProgress, queue);
      
        if (__DEV__) {
          currentlyProcessingQueue = queue;
        }
      
        // These values may change as we process the queue.
        let newBaseState = queue.baseState;
        let newFirstUpdate = null;
        let newExpirationTime = NoWork;
      
        // Iterate through the list of updates to compute the result.
        let update = queue.firstUpdate; 
        let resultState = newBaseState;
        while (update !== null) {
          const updateExpirationTime = update.expirationTime;
          if (updateExpirationTime < renderExpirationTime) {
            // This update does not have sufficient priority. Skip it.
            if (newFirstUpdate === null) {
              // This is the first skipped update. It will be the first update in
              // the new list.
              newFirstUpdate = update;
              // Since this is the first update that was skipped, the current result
              // is the new base state.
              newBaseState = resultState;
            }
            // Since this update will remain in the list, update the remaining
            // expiration time.
            if (newExpirationTime < updateExpirationTime) {
              newExpirationTime = updateExpirationTime;
            }
          } else {
            // This update does have sufficient priority. Process it and compute
            // a new result.
            resultState = getStateFromUpdate(
              workInProgress,
              queue,
              update,
              resultState,
              props,
              instance,
            );
            const callback = update.callback;
            // 判断是否有 callback
            if (callback !== null) {
              workInProgress.effectTag |= Callback; // 加上 Callback 这块
              // Set this to null, in case it was mutated during an aborted render.
              update.nextEffect = null; // 防止在中断的渲染中被修改
              if (queue.lastEffect === null) {
                queue.firstEffect = queue.lastEffect = update; // 链表操作
              } else {
                queue.lastEffect.nextEffect = update;
                queue.lastEffect = update;
              }
            }
          }
          // Continue to the next update.
          update = update.next;
        }
      
        // Separately, iterate though the list of captured updates.
        let newFirstCapturedUpdate = null;
        update = queue.firstCapturedUpdate;
        while (update !== null) {
          const updateExpirationTime = update.expirationTime;
          if (updateExpirationTime < renderExpirationTime) {
            // This update does not have sufficient priority. Skip it.
            if (newFirstCapturedUpdate === null) {
              // This is the first skipped captured update. It will be the first
              // update in the new list.
              newFirstCapturedUpdate = update;
              // If this is the first update that was skipped, the current result is
              // the new base state.
              if (newFirstUpdate === null) {
                newBaseState = resultState;
              }
            }
            // Since this update will remain in the list, update the remaining
            // expiration time.
            if (newExpirationTime < updateExpirationTime) {
              newExpirationTime = updateExpirationTime;
            }
          } else {
            // This update does have sufficient priority. Process it and compute
            // a new result.
            resultState = getStateFromUpdate(
              workInProgress,
              queue,
              update,
              resultState,
              props,
              instance,
            );
            const callback = update.callback;
            if (callback !== null) {
              workInProgress.effectTag |= Callback;
              // Set this to null, in case it was mutated during an aborted render.
              update.nextEffect = null;
              if (queue.lastCapturedEffect === null) {
                queue.firstCapturedEffect = queue.lastCapturedEffect = update;
              } else {
                queue.lastCapturedEffect.nextEffect = update;
                queue.lastCapturedEffect = update;
              }
            }
          }
          update = update.next;
        }
      
        if (newFirstUpdate === null) {
          queue.lastUpdate = null;
        }
        if (newFirstCapturedUpdate === null) {
          queue.lastCapturedUpdate = null;
        } else {
          workInProgress.effectTag |= Callback;
        }
        if (newFirstUpdate === null && newFirstCapturedUpdate === null) {
          // We processed every update, without skipping. That means the new base
          // state is the same as the result state.
          newBaseState = resultState;
        }
      
        queue.baseState = newBaseState;
        queue.firstUpdate = newFirstUpdate;
        queue.firstCapturedUpdate = newFirstCapturedUpdate;
      
        // Set the remaining expiration time to be whatever is remaining in the queue.
        // This should be fine because the only two other things that contribute to
        // expiration time are props and context. We're already in the middle of the
        // begin phase by the time we start processing the queue, so we've already
        // dealt with the props. Context in components that specify
        // shouldComponentUpdate is tricky; but we'll have to account for
        // that regardless.
        workInProgress.expirationTime = newExpirationTime;
        workInProgress.memoizedState = resultState;
      
        if (__DEV__) {
          currentlyProcessingQueue = null;
        }
      }
      • 进入 ensureWorkInProgressQueueIsAClone
      js 复制代码
      function ensureWorkInProgressQueueIsAClone<State>(
        workInProgress: Fiber,
        queue: UpdateQueue<State>,
      ): UpdateQueue<State> {
        const current = workInProgress.alternate;
        if (current !== null) {
          // If the work-in-progress queue is equal to the current queue,
          // we need to clone it first.
          if (queue === current.updateQueue) {
            // 要保证 workInProgress.updateQueue 是一个克隆的queue, 而非直接进行修改
            queue = workInProgress.updateQueue = cloneUpdateQueue(queue); // 拷贝 queue
          }
        }
        return queue;
      }
    • 进入 getStateFromUpdate

      js 复制代码
      function getStateFromUpdate<State>(
        workInProgress: Fiber,
        queue: UpdateQueue<State>,
        update: Update<State>,
        prevState: State,
        nextProps: any,
        instance: any,
      ): any {
        switch (update.tag) {
          case ReplaceState: {
            const payload = update.payload;
            if (typeof payload === 'function') {
              // Updater function
              if (__DEV__) {
                if (
                  debugRenderPhaseSideEffects ||
                  (debugRenderPhaseSideEffectsForStrictMode &&
                    workInProgress.mode & StrictMode)
                ) {
                  payload.call(instance, prevState, nextProps);
                }
              }
              return payload.call(instance, prevState, nextProps);
            }
            // State object
            return payload;
          }
          // 这里 a & ~b 表示: a & 除了b之外的所有属性
          case CaptureUpdate: {
            workInProgress.effectTag =
              (workInProgress.effectTag & ~ShouldCapture) | DidCapture; // 这里最终剩下的 只有 DidCapture
          }
          // Intentional fallthrough
          case UpdateState: {
            const payload = update.payload;
            let partialState;
            if (typeof payload === 'function') {
              // Updater function
              if (__DEV__) {
                if (
                  debugRenderPhaseSideEffects ||
                  (debugRenderPhaseSideEffectsForStrictMode &&
                    workInProgress.mode & StrictMode)
                ) {
                  payload.call(instance, prevState, nextProps);
                }
              }
              // 如果是 function 则调用 payload 传入之前的参数 计算出 state
              partialState = payload.call(instance, prevState, nextProps);
            } else {
              // Partial state object
              partialState = payload;
            }
            // 处理特殊情况
            if (partialState === null || partialState === undefined) {
              // Null and undefined are treated as no-ops.
              return prevState;
            }
            // Merge the partial state and the previous state.
            // 合并
            return Object.assign({}, prevState, partialState);
          }
          case ForceUpdate: {
            hasForceUpdate = true;
            return prevState;
          }
        }
        return prevState;
      }
  • 进入 finishClassComponent

    js 复制代码
    function finishClassComponent(
      current: Fiber | null,
      workInProgress: Fiber,
      Component: any,
      shouldUpdate: boolean,
      hasContext: boolean,
      renderExpirationTime: ExpirationTime,
    ) {
      // Refs should update even if shouldComponentUpdate returns false
      // 这个先跳过
      markRef(current, workInProgress);
    
      // 判断 workInProgress.effectTag 上是否有 DidCapture
      const didCaptureError = (workInProgress.effectTag & DidCapture) !== NoEffect;
      // 在没有更新也没有错误捕获的情况下
      if (!shouldUpdate && !didCaptureError) {
        // Context providers should defer to sCU for rendering
        if (hasContext) {
          invalidateContextProvider(workInProgress, Component, false);
        }
        // 跳过更新
        return bailoutOnAlreadyFinishedWork(
          current,
          workInProgress,
          renderExpirationTime,
        );
      }
    
      const instance = workInProgress.stateNode;
    
      // Rerender
      ReactCurrentOwner.current = workInProgress;
      let nextChildren;
      // 有任何错误捕获, 但没有配置这个api的时候
      // 这个 getDerivedStateFromError 生命周期的api和 componentDidCatch 有区别, 后者在下次更新的时候处理,中间可能instance不存在(因为出错了)
      // 就继续可能引发在这个class component上面设置的 ref拿到一个null, 操作ref的时候就会出现错误
      // 在前者这个新的生命周期的api中, 在本次渲染中,生成 state, 渲染出属性, 这样对于 instance 对象依然存在 对应 ref 就可以拿到实际的对象
      if (
        didCaptureError &&
        typeof Component.getDerivedStateFromError !== 'function'
      ) {
        // If we captured an error, but getDerivedStateFrom catch is not defined,
        // unmount all the children. componentDidCatch will schedule an update to
        // re-render a fallback. This is temporary until we migrate everyone to
        // the new API.
        // TODO: Warn in a future release.
        nextChildren = null;
    
        if (enableProfilerTimer) {
          stopProfilerTimerIfRunning(workInProgress);
        }
      } else {
        if (__DEV__) {
          ReactCurrentFiber.setCurrentPhase('render');
          nextChildren = instance.render();
          if (
            debugRenderPhaseSideEffects ||
            (debugRenderPhaseSideEffectsForStrictMode &&
              workInProgress.mode & StrictMode)
          ) {
            instance.render();
          }
          ReactCurrentFiber.setCurrentPhase(null);
        } else {
          // 调用 render 方法,计算出新的 children
          nextChildren = instance.render();
        }
      }
    
      // React DevTools reads this flag.
      workInProgress.effectTag |= PerformedWork; // 增加 PerformedWork
      // 不是第一次渲染,并且有错误捕获
      if (current !== null && didCaptureError) {
        // If we're recovering from an error, reconcile without reusing any of
        // the existing children. Conceptually, the normal children and the children
        // that are shown on error are two different sets, so we shouldn't reuse
        // normal children even if their identities match.
        forceUnmountCurrentAndReconcile(
          current,
          workInProgress,
          nextChildren,
          renderExpirationTime,
        );
      } else {
        // 正常情况调用 调和 children
        reconcileChildren(
          current,
          workInProgress,
          nextChildren,
          renderExpirationTime,
        );
      }
    
      // Memoize state using the values we just used to render.
      // TODO: Restructure so we never read values from the instance.
      workInProgress.memoizedState = instance.state;
    
      // The context might have changed so we need to recalculate it.
      if (hasContext) {
        invalidateContextProvider(workInProgress, Component, true);
      }
    
      return workInProgress.child; // 把 render 方法渲染出来的第一个子节点 返回给 nextUnitOfWork, 就可以在 workLoop 中继续进行更新的流程
    }
  • 简单总结

    • 以上是更新 class component 的整体流程
    • 一开始要使用 constructClassInstance 创建 class instance
    • 内部会根据不同情况调用不同方法
    • 并且要调用 mountClassInstance 来挂载
    • 如果是第一次渲染被中断的情况
      • 如果存在 instance 则重复使用 instance
      • 它调用的生命周期方法仍然是 第一次渲染的生命周期方法
      • 也就是 componentDidMount
    • 如果不是第一次渲染的情况
      • 调用 updateClassInstance 方法
      • 这种会最终调用 componentDidUpdate 方法
    • 它们中间的流程类似
      • 判断各种情况,创建新的 instance 或 复用之前的
      • 通过 processUpdateQueue 来获取新的 state
      • 会把它赋值到 instance 和 fiber 上面进行记录
      • 最终都会调用 finishClassComponent
        • 这里面做一些错误判断的处理
        • 以及是否可以跳过更新的过程
        • 还有重新调和子节点 (通用流程)
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js