ReactFiber初识

React Fiber

主要目标:

1、能够把可中断的任务做切片处理。

2、能够调整优先级重置复用任务。

用于解决stack reconcile中的固有问题,将React中同步的计算过程做拆分,使主线程不会一直处于占用的状态,因而其他IO操作,比如动画、手势等得以执行。

why: 长时间运行的JS会影响动画、布局和手势,原因是JS引擎线程与GUI页面渲染线程是互斥的,所以长时间执行JS可能会造成页面假死、掉帧的现象。

历史原因: 在React15版本中,用到的核心算法是Reconcile,理解为stack Reconcile, 采用自顶向下递归,从根组件或者触发setState的子组件向下递归,更新过程中主要涉及俩步:1、Diff,比较prevInstance和nextInstance,找出差异及VDOM Change,本质上是一些计算(遍历、比较),在这一过程中是无法执行IO操作的;2、Patch,将Diff出来的差异队列更新到DOM节点上。Patch是批量执行的,并不是有差异就会执行。

浏览器中的渲染进程是多线程的,分为GUI渲染线程、JS引擎线程、事件触发线程、定时触发器线程、异步http请求线程。GUI渲染线程与JS引擎线程互斥

# React

Comments

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×