关于前端:react中的渲染流程

疾速响应：异步可中断 + 增量更新(不是全量更新)
性能瓶颈
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';
//根Fiber
let rootFiber = {
    tag:TAG_ROOT，
    key:"ROOT",
    stateNode:root, //实在Dom节点
    props:{children:[A]}
}

//这个Fiber根节点const TAG_HOST =TAG_HOST';//指的是原生DOM节点 div span pfunction
workLoop(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();