Update

在React中，用户触发的相关操作都会有可能触发Update更新

在React内部中触发状态更新的几种方式：

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

Update

createUpdate

export function createUpdate(eventTime: number, lane: Lane): Update<*> {
  const update: Update<*> = {
    eventTime, // 当前任务
    lane, // 优先级
    tag: UpdateState, // 更新类型 UpdateState | ReplaceState | ForceUpdate | CaptureUpdate
    payload: null, // 更新的数据
    callback: null, // 更新的回调函数
    next: null, // 指针，指向下一个update
  }
  return update
}

调用createUpdate返回update，挂载到fiber的updateQueue上

this.setState()

组件内部实现状态更新使用this.setState()

Component的setState方法

function Component(props, context, updater) {
  this.updater = updater || ReactNoopUpdateQueue
}

Component.prototype.setState = function(partialState, callback) {
  // 添加新状态 
  this.updater.enqueueSetState(this, partialState, callback, 'setState')
}

updater

const classComponentUpdater = {
  enqueueSetState(inst, payload, callback) {
    // 拿到当前实例的fiber
    const fiber = getInstance(inst);
    const eventTime = requestEventTime();
    // 获取优先级
    const lane = requestUpdateLane(fiber);
    // 创建update
    const update = createUpdate(eventTime, lane);
    // 挂载更新的数据
    update.payload = payload;
    if (callback !== undefined && callback !== null) {
      // 挂载更新的回调
      update.callback = callback;
    }
    // 将本次产生的update 挂载到fiber的updateQueue
    enqueueUpdate(fiber, update);
    // 调度更新
    scheduleUpdateOnFiber(fiber, lane, eventTime);
  }
}