SetState流程:
将setState的内容存入this.updater.enqueueSetState,如果存在callback,将 callback写入this.updater.enqueueCallback(this,)
1.在enqueueSetState方法中先创建InternalInstance
2执行enqueueUpdate(internalInstance),将其放入更新队列。
2.1在enqueueUpdate方法中会判断当前是否批量更新中:
2.1.1如果当前处理批量处理更新中(即,isBatchingUpdates = true),则将InternalInstance放入dirtyComponent中,等待flush
2.1.2否则,执行batchingStrategy.batchedUpdates(enqueueUpdate, component),实则用事务transaction.perform再执行enqueueUpdate,此时isBatchingUpdates为true,返回步骤2.1.1。
总而言之,enqueueUpdate是实现在批量更新过程中,将待更新的InternalInstance写入dirtyComponent。
2.2 batchedUpdates处于transaction中,它在initial阶段设置isBatchingUpdates 标志位,这就是2.1.2的原因。close阶段清除标志位,同时会调用flushBatchedUpdates 方法更新(即,ReactUpdates.flushBatchedUpdates.bind(ReactUpdates))
2.3 flushBatchedUpdates更新状态
2.3.1 以transaction方式调用runBatchedUpdates
2.3.1.1遍历dirtyComponent,并对组件进行排序,保证先渲染父组件再渲染子组件。同时判断该setState是否有callback,如果有则保存。
2.3.1.2 执行ReactReconciler.performUpdateIfNecessary
2.3.1.2.1在updateComponent方法中,更新state、props、content。
2.3.1.2.2判断是否需要更新虚拟DOM,如果需要更新则调用_performComponentUpdate,否则只对props、state、context进行更新
2.4 ReactUpdatesFlushTransaction的close阶段触发回调函数this.callbackQueue.notifyAll()(从而保证了callback在setState完成后触发)。