React Fiber的理解

协同(reconciliation)

浏览器的刷新频率和电脑的刷新频率一样(根据同步信号进行同步).

点击了浏览器的某个按钮,新的组件生成,旧组件更新或销毁,非常的消耗性能,占据大量的浏览器刷新时间

GUI的渲染和JavaScript的代码执行是在同一个线程: 互斥

而线程有非常多的任务(用户事件的响应,js代码的执行,其他耗时的操作...),一帧就要执行这些.如果更新超时,造成有些东西渲染不了,用户就会感受到卡顿.

将上面要执行的耗时任务切割为很多的Fiber

在react的新旧虚拟DOM进行协同时,Fiber -> Fiber树 -> ReactElemement树_(一一对应)

Fiber是执行单元(碎片),浏览器将全部执行的事件分为多个帧.在每一帧的执行时间里,浏览器先执行完系统的一些必须执行的事件,剩余的时间去执行Fiber碎片(耗时操作分割出来的),一帧的时间结束后.浏览器转去执行下一帧系统的事件,剩余时间执行Fiber.每一帧每一帧的去重复执行.

这样,就不会卡顿了.协同的时候分为很多的执行单元.