Weismann

React版本
Component.prototype.setState
1. this.updater.enqueueSetState
总结
参考资料

React版本

16.8.6

Component.prototype.setState

react/packages/react/src/ReactBaseClasses.js

Component.prototype.setState = function(partialState, callback) {
  invariant(
    typeof partialState === 'object' ||
      typeof partialState === 'function' ||
      partialState == null,
    'setState(...): takes an object of state variables to update or a ' +
      'function which returns an object of state variables.',
  );
  this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

this.updater.enqueueSetState

react/packages/reactreconciler/src/ReactFiberClassComponent.js

如果搜索这个函数名的话，你会发现有四个地方，三个是定义，一个是使用，另外两个定义的地方分别是用来测试和报错

enqueueSetState(inst, payload, callback) {
  const fiber = getInstance(inst);  //获得组件实例
  const currentTime = requestCurrentTime();
  const expirationTime = computeExpirationForFiber(currentTime, fiber);

  const update = createUpdate(expirationTime);
  update.payload = payload;
  if (callback !== undefined && callback !== null) {
    if (__DEV__) {
      warnOnInvalidCallback(callback, 'setState');
    }
    update.callback = callback;
  }

  //flushPassiveEffects和scheduleWork都会根据以下路径的boolean常量（false）进行不同的函数赋值
  //应该是控制新旧版本逻辑的代码，可能未来返回true，使用新的调度逻辑
  //react/packages/shared/ReactFeatureFlags.js
  flushPassiveEffects();  //好像没什么意义，最终返回了一个boolean，也没人承接
  enqueueUpdate(fiber, update);
  scheduleWork(fiber, expirationTime);
}

getInstance

react/packages/shared/ReactInstanceMap.js

此处是getInstance，使用了as关键字进行了重命名

export function get(key) {
  return key._reactInternalFiber;
}

createUpdate

react/packages/react-reconciler/src/ReactUpdateQueue.js

export function createUpdate(expirationTime: ExpirationTime): Update<*> {
  return {
    expirationTime: expirationTime,

    tag: UpdateState,
    payload: null,
    callback: null,
    next: null,
    nextEffect: null,
  };
}

enqueueUpdate

react/packages/react-reconciler/src/ReactUpdateQueue.js

export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
  const alternate = fiber.alternate;  //获取fiber替身，就是即将要更新的fiber对象
  let queue1;
  let queue2;
  //下面是对queue1、queue2的空值处理
  if (alternate === null) {  //首次更新
    queue1 = fiber.updateQueue;
    queue2 = null;
    if (queue1 === null) {
      queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
    }
  } else {  //非首次更新
    queue1 = fiber.updateQueue;
    queue2 = alternate.updateQueue;
    if (queue1 === null) {
      if (queue2 === null) {
        queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
        queue2 = alternate.updateQueue = createUpdateQueue(
          alternate.memoizedState,
        );
      } else {
        queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
      }
    } else {
      if (queue2 === null) {
        queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
      } else {
        // Both owners have an update queue.
      }
    }
  }
  //下面添加队列逻辑
  if (queue2 === null || queue1 === queue2) {  //只有一种queue的情况
    appendUpdateToQueue(queue1, update);
  } else {  //当有两个queue时合并，因为我们不想让相同的queue多次添加
    if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
      //只有一种lastUpdate的情况，将lastUpdate添加到两个queue
      appendUpdateToQueue(queue1, update);
      appendUpdateToQueue(queue2, update);
    } else {
      // Both queues are non-empty. The last update is the same in both lists,
      // because of structural sharing. So, only append to one of the lists.
      appendUpdateToQueue(queue1, update);
      //修正queue2.lastUpdate指向
      queue2.lastUpdate = update;
    }
  }

  if (__DEV__) {
    if (
      fiber.tag === ClassComponent &&
      (currentlyProcessingQueue === queue1 ||
        (queue2 !== null && currentlyProcessingQueue === queue2)) &&
      !didWarnUpdateInsideUpdate
    ) {
      warningWithoutStack(
        false,
        'An update (setState, replaceState, or forceUpdate) was scheduled ' +
          'from inside an update function. Update functions should be pure, ' +
          'with zero side-effects. Consider using componentDidUpdate or a ' +
          'callback.',
      );
      didWarnUpdateInsideUpdate = true;
    }
  }
}

createUpdateQueue

react/packages/react-reconciler/src/ReactUpdateQueue.js

export function createUpdateQueue<State>(baseState: State): UpdateQueue<State> {
  const queue: UpdateQueue<State> = {
    baseState,
    firstUpdate: null,  //链表头
    lastUpdate: null,  //链表尾
    firstCapturedUpdate: null,
    lastCapturedUpdate: null,
    firstEffect: null,
    lastEffect: null,
    firstCapturedEffect: null,
    lastCapturedEffect: null,
  };
  return queue;
}