this.setState(paticalState,callback)过程

会调用 this.updater.enquenSetState(this,paticalState,callback,’setState’),
enquenSetState 内部调用了 ReactInstanceMap.get(component也就是this)获取到了fiber实例,然后基于performance.now()||Date.now()获取到currentTime，用createUpdate(currentTime)创建了update对象(单链表节点格式对象，最终调用 enquenUpdate(fiber,update)来update。
enquenUpdate源码

  2. //以下注释仅对 ClassComponent有效(即你的组件是继承React.Component)
  3. export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
  4.   // Update queues are created lazily. Update queues被延迟创建(即这个组件没有update 我们没有必要给它fiber来创建这样属性) 
  5.   const alternate = fiber.alternate;
  6.   let queue1;//设计它是为了指向current的updateQueue
  7.   let queue2; //设计它是为了指向alternate 的updateQueue
  8.   if (alternate === null) {//alternate为null，对于classcomponent第一次调用setState时alternate为null
  9.     // There's only one fiber.
  10.     queue1 = fiber.updateQueue;
  11.     queue2 = null;
  12.     if (queue1 === null) {//首次调用setState创建updateQueue,这时的memoizedState为初始值
  13.       queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
  14.     }
  15.   } else {
  16.     // There are two owners.
  17.     queue1 = fiber.updateQueue;//current Fiber updateQueue 
  18.     queue2 = alternate.updateQueue;
  19.     if (queue1 === null) {
  20.       if (queue2 === null) {
  21.         // Neither fiber has an update queue. Create new ones.
  22.         //如果都为空，则分别创建，这个case我没有找到
  23.         queue1 = fiber.updateQueue = createUpdateQueue(fiber.memoizedState);
  24.         queue2 = alternate.updateQueue = createUpdateQueue(
  25.           alternate.memoizedState,
  26.         );
  27.       } else {
  28.         // Only one fiber has an update queue. Clone to create a new one.
  29.         // 如果有一个有update Queue,则克隆一个 
  30.         queue1 = fiber.updateQueue = cloneUpdateQueue(queue2);
  31.       }
  32.     } else {
  33.       if (queue2 === null) {
  34.         // Only one fiber has an update queue. Clone to create a new one.
  35.         queue2 = alternate.updateQueue = cloneUpdateQueue(queue1);
  36.       } else {
  37.         // Both owners have an update queue.
  38.       }
  39.     }
  40.   }
  41.   if (queue2 === null || queue1 === queue2) { 
  42.     // There's only a single queue.
  43.     //一般发生在首次 setState
  44.     appendUpdateToQueue(queue1, update);
  45.   } else {
  46.     // There are two queues. We need to append the update to both queues,
  47.     // while accounting for the persistent structure of the list — we don't
  48.     // want the same update to be added multiple times.
  49.      // 翻译:如果存在两个queues,我们需要追加这个 update到这个两个 queues.
  50.       //然而对于这种持久性结构的列表(updateQueue)需要保证一次update不能添加多次 
  51.     if (queue1.lastUpdate === null || queue2.lastUpdate === null) {
  52.       // One of the queues is not empty. We must add the update to both queues.
  53.       appendUpdateToQueue(queue1, update);
  54.       appendUpdateToQueue(queue2, update);
  55.     } else {
  56.       // Both queues are non-empty. The last update is the same in both lists,
  57.       // because of structural sharing. So, only append to one of the lists.
  58.       appendUpdateToQueue(queue1, update);
  59.       // But we still need to update the `lastUpdate` pointer of queue2.
  60.       queue2.lastUpdate = update;
  61.     }
  62.   }
  64.   if (__DEV__) {
  65.     if (
  66.       fiber.tag === ClassComponent &&
  67.       (currentlyProcessingQueue === queue1 ||
  68.         (queue2 !== null && currentlyProcessingQueue === queue2)) &&
  69.       !didWarnUpdateInsideUpdate
  70.     ) {
  71.       warningWithoutStack(
  72.         false,
  73.         'An update (setState, replaceState, or forceUpdate) was scheduled ' +
  74.           'from inside an update function. Update functions should be pure, ' +
  75.           'with zero side-effects. Consider using componentDidUpdate or a ' +
  76.           'callback.',
  77.       );
  78.       didWarnUpdateInsideUpdate = true;
  79.     }
  80.   }
  81. }

updater

当前版本下updater下挂在了四个api

  1. // react中打印this可见，最重要的就是enqueueSetState
  2. updater:{
  3.     enqueueForceUpdate: ƒ (inst, callback)
  4.     enqueueReplaceState: ƒ (inst, payload, callback)
  5.     enqueueSetState: ƒ (inst, payload, callback)
  6.     isMounted: ƒ isMounted(component)
  7. }

updater对象在整个react框架里是个单例。所有的update其实都是调用了这个对象的方法。