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

最新推荐文章于 2024-02-01 22:37:33 发布

ccAllen23

最新推荐文章于 2024-02-01 22:37:33 发布

阅读量282

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zz2000aa/article/details/122918122

版权

本文详细解析了React状态更新的流程，包括setState和forceUpdate的调用，Update和updateQueue的创建，从触发更新的fiber节点向上遍历到rootFiber的过程，以及调度和状态计算。文章还探讨了带优先级的状态更新，解释了在并发模式下如何处理不同优先级的任务，确保状态的一致性。

摘要由CSDN通过智能技术生成

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

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

setState&forceUpdate

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

ReactDOM.render
this.setState
this.forceUpdate
useState
useReducer

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

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;
  const pending = sharedQueue.pending;
  if (pending === null) {
     
    update.next = update;//与自己形成环状链表
  } else {
     
    update.next = pending.next;//加入链表的结尾
    pending.next = update;
  }
  sharedQueue.pending = update;
}