image.png

    1. import elements from './element.js'
    4. // 目的： 把虚拟DOM渲染到根节点中
    5. let container = document.getElementById('root');
    6. const PLACEMENT = 'PLACEMENT';
    8. // 下一个工作单元
    9. // fiber对象其实也是一个普通的JS对象
    11. let workInProgressRoot  = {
    12.   stateNode: container, //  静态节点，fiber的真实DOM
    13.   props: {children: [elements]}, // fiber的属性
    14. };
    15. let nextUnitOfWork = workInProgressRoot;
    18. function workLoop(){
    19.   while(nextUnitOfWork){ // 下一个工作单元
    20.     nextUnitOfWork = performUnitOfWork(nextUnitOfWork) // 返回下一个工作单元
    21.   }
    22.   if(!nextUnitOfWork){
    23.     commitRoot()
    24.   }
    26. }
    28. function commitRoot () {
    29.   let currentFiber = workInProgressRoot.firstEffect;
    30.   while(currentFiber){
    32.     if(currentFiber.effectTag === PLACEMENT){
    33.       console.log('commitRoot',currentFiber.return.stateNode)
    34.       console.log('currentFiber.stateNode',currentFiber.stateNode)
    36.       currentFiber.return.stateNode.appendChild(currentFiber.stateNode)
    37.     } 
    38.     currentFiber = currentFiber.nextEffect;
    39.   }
    40.   workInProgressRoot = null;
    41. }
    44. function performUnitOfWork (workingInProgressFiber) { // workingInProgressFiber 正在工作中的fiber节点
    45.   beginWork(workingInProgressFiber) // 创建真实DOM  创建fiber子节点， 不进行挂载
    47.   if(workingInProgressFiber.child){ // 如果有子节点就返回
    48.     return workingInProgressFiber.child
    49.   }
    51.   while(workingInProgressFiber){
    52.     completeUnitOfWork(workingInProgressFiber)
    53.     if(workingInProgressFiber.sibling){  // 如果有兄弟节点就返回
    54.       return workingInProgressFiber.sibling
    55.     }
    57.     workingInProgressFiber = workingInProgressFiber.return // 如果都没有 指向父节点 重新寻找
    58.   }
    61. }
    63. function beginWork (workingInProgressFiber){
    64.   console.log('beginWork', workingInProgressFiber.props.id)
    65.   // 创建真实DOM
    66.   if(!workingInProgressFiber.stateNode){
    67.     workingInProgressFiber.stateNode = document.createElement(workingInProgressFiber.type)
    68.     for(let key in workingInProgressFiber.props){
    69.       if(key !== 'children'){
    70.         workingInProgressFiber.stateNode[key] = workingInProgressFiber.props[key];
    71.       }
    72.     }
    73.   }
    75.   // 创建子fiber
    76.   let perviousFiber;
    78.   if(Array.isArray(workingInProgressFiber.props.children)){
    79.     workingInProgressFiber.props.children.forEach((child, index) =>{
    80.       let childFiber ={
    81.         type: child.type,
    82.         props: child.props,
    83.         return: workingInProgressFiber, // 
    84.         effectTag: PLACEMENT, // 副作用标记，表示这个节点要进行什么操作
    85.         nextEffect: null  // 下一个有副作用的节点
    86.       }
    88.       if(index === 0) {
    89.         workingInProgressFiber.child = childFiber // 让父节点的child指向儿子
    90.       } else {
    91.         perviousFiber.sibling = childFiber;
    92.       }
    94.       perviousFiber = childFiber
    97.     })
    98.   }
    101. } 
    103. function completeUnitOfWork (workingInProgressFiber) {
    104.   console.log('completeUnitOfWork', workingInProgressFiber.props.id)
    106.   // 构建副作用链，effectList，只有那些有副作用的节点
    108.   let returnFiber = workingInProgressFiber.return; // A1
    109.   if(returnFiber){ // 把子的副作用和自己的副作用都归到自己身上
    110.     // 把当前fiber的有副作用子链表挂载到父亲身上
    111.     if(!returnFiber.firstEffect){
    112.       returnFiber.firstEffect = workingInProgressFiber.firstEffect
    113.     }
    114.     if(workingInProgressFiber.lastEffect){
    115.       if(returnFiber.lastEffect){
    116.         returnFiber.lastEffect.nextEffect = workingInProgressFiber.firstEffect
    117.       }
    118.       returnFiber.lastEffect = workingInProgressFiber.lastEffect;
    119.     }
    121.     // 再把自己挂到后边
    123.     if(workingInProgressFiber.effectTag){
    124.       if(returnFiber.lastEffect){
    125.         returnFiber.lastEffect.nextEffect = workingInProgressFiber;
    126.       } else {
    127.         returnFiber.firstEffect = workingInProgressFiber
    128.       }
    129.       returnFiber.lastEffect = workingInProgressFiber;
    130.     }
    133.   }
    135. }
    136. // 告诉浏览器在每帧的空余时间调用工作循环
    137. requestIdleCallback(workLoop)