react源码解析12.状态更新流程

react源码解析12.状态更新流程

视频讲解（高效学习）：进入学习

往期文章：

1.开篇介绍和面试题

2.react的设计理念

3.react源码架构

4.源码目录结构和调试

5.jsx&核心api

6.legacy和concurrent模式入口函数

7.Fiber架构

8.render阶段

9.diff算法

10.commit阶段

11.生命周期

12.状态更新流程

13.hooks源码

14.手写hooks

15.scheduler&Lane

16.concurrent模式

17.context

18事件系统

19.手写迷你版react

20.总结&第一章的面试题解答

21.demo

setState&forceUpdate

在react中触发状态更新的几种方式：

• ReactDOM.render
• this.setState
• this.forceUpdate
• useState
• useReducer

我们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲

1. this.setState内调用this.updater.enqueueSetState，主要是将update加入updateQueue中

   //ReactBaseClasses.js
   Component.prototype.setState = function (partialState, callback) {
        
     if (!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null)) {
        
       {
        
         throw Error( "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');
   };
   
   

   //ReactFiberClassComponent.old.js
   enqueueSetState(inst, payload, callback) {
        
     const fiber = getInstance(inst);//fiber实例
   
     const eventTime = requestEventTime();
     const suspenseConfig = requestCurrentSuspenseConfig();
     
     const lane = requestUpdateLane(fiber, suspenseConfig);//优先级
   
     const update = createUpdate(eventTime, lane, suspenseConfig);//创建update
   
     update.payload = payload;
   
     if (callback !== undefined && callback !== null) {
          //赋值回调
       update.callback = callback;
     }
   
     enqueueUpdate(fiber, update);//update加入updateQueue
     scheduleUpdateOnFiber(fiber, lane, eventTime);//调度update
   }
   

   enqueueUpdate用来将update加入updateQueue队列

   //ReactUpdateQueue.old.js
   export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
        
     const updateQueue = fiber.updateQueue;
     if (updateQueue === null) {
        
       return;
     }
   
     const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;