二、React中的更新

创建更新的方式:ReactDOM.render||hydrate 初次渲染,然后是setState、forceUpdate

一、React.render()

步骤:创建ReactRoot、创建FiberRoot和RootFiber、创建更新,这样我们的应用就到了更新调度。

什么是FiberRoot : 整个应用的起点,包含应用挂载的目标节点,记录整个应用更新过程的各种信息

什么是Fiber:

每一个ReactElement对应一个Fiber对象

记录节点的各种状态。就是说state和props其实不是记录在class Component里面的,而是记录在Fiber中,只有等Fiber更新之后,classComponent才会更新。

串联整个应用形成树形结构。串联成Fiber树,主要是通过child,return, sibling这三个树形进行串联在一起

 更新,setState,forceUpdate 只是在源码中的类型,tag不同。

setState 是同步的还是异步的?

setState本身的方法调用是同步的。但是调用setState并不意味着state立马就更新了,这个更新得根据当前执行的上下文环境来判断的。如果是处于批量更新的上下文,则state就不是立马更新的。如果不处于批量更新的情况下,是立马更新的。如果异步更新,需要进入异步调度的过程,就不是立马更新的。

异步调度reactScheduler:维护时间片,模拟requestIdleCallback,调度列表和超时判断。

维护时间片:浏览器每33ms渲染一遍

原文地址:https://www.cnblogs.com/QianDingwei/p/11079025.html