疾速响应:异步可中断 + 增量更新(不是全量更新)
性能瓶颈
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();