疾速响应:异步可中断 + 增量更新(不是全量更新)
性能瓶颈
JS工作执行工夫过长。浏览器刷新频率为60Hz大略16.6毫秒渲染一次,而JS线程和渲染线程是互斥的,所以如果JS线程执行工作工夫超过16.6ms的话,就会导致掉帧,导致卡顿,
解决方案就是React利用闲暇的工夫进行更新,不影响渲染进行的渲染把一个耗时工作切分成一个个小工作,散布在每一帧里的形式就叫工夫切片(5ms-5.5ms)
react为了兼容性,没有用requestIdleCallback 而是应用MessageChannel+requestAnimationFrame模仿了requestIdleCallback
fiber
咱们能够通过某些调度策略正当调配CPU资源,从而进步用户的响应速度
通过Fiber架构,让本人的和谐过程变成可被中断。 适时地让出CPU执行权,除了能够让浏览器及时地响应用户的交互
渲染分三个阶段:Scheduler调度,Reconciler和谐,commit提交
Fiber对象
let workInProgress;const TAG_ROOT ='TAG ROOT';//根Fiberlet rootFiber = { tag:TAG_ROOT, key:"ROOT", stateNode:root, //实在Dom节点 props:{children:[A]}}//这个Fiber根节点const TAG_HOST =TAG_HOST';//指的是原生DOM节点 div span pfunctionworkLoop(deadline){ while(deadline.timeRemainidng()>1&&workInProgress){//如果有工作就执行 workInProgress=performUnitofWork(workInProgress) }}function performUnitofwork(workInProgress){ beginWork(workInProgress) if(workInProgress.child){ return workInProgress.child } while(workInProgress){ completeUnitofWork(workInProgress) //没有儿子找兄弟 if(workInProgresss.sibling){ retrun workInProgresss.sibling } //没有兄弟找父亲的兄弟 workInProgresss = workInProgresss.return //没有父亲,就完结了 }}//节点实现function completeUnitofWork(workInProgress){ console.log(' completeUnitofwork',workInProgress .key); let stateNode;// 实在DOM switch(workInProgress.tag)( case TAG HOST: stateNode = createStateNode(workInProgress); break;}//创立实在dom元素function createStateNode(fiber){ if(fiber.tag === TAG_HOST){ let stateNode = document.createElement(fiber .type) fiber.stateNode = stateNode ; } return fiber.stateNode;}function beginWork(workInProgress){ console.log( ' beginwork',workInProgress .key); let nextChildren = workInProgress.props.children; return reconcileChildren(workInProgress,nextChildren)};//建设链表,依据父fiber和子虚构DOM数组,构建以后returnFiber的子Fiber树function reconcileChildren(returnFiber,nextChildren){ let previousNewFiber; let firstChildFiber; for(let newIndex=0;newIndex<nextChildren.length;newIndex++){ let newFiber = createFiber(nextChildren[newIndex]); newFiber.return = returnFiber if(!firstChildFiber){ firstChildFiber = newFiber//赋值大儿子 }else{ previousNewFiber.sibling = newFiber } previousNewFiber = newFiber } returnFiber.child = firstChildFiber return firstChildFiber//返回大儿子}function createFiber(element){ return{ tag:TAG_HOST, type:element.type, key:element.key, props:element.props } }//以后正在执行的工作单元workInProgress=rootFiber;workLoop();