React Fiber与调和深入分析

function FiberNode(){
  this.tag = tag;                  // fiber 标签 证明是什么类型fiber。
  this.key = key;                  // key调和子节点时候用到。 
  this.type = null;                // dom元素是对应的元素类型，比如div，组件指向组件对应的类或者函数。  
  this.stateNode = null;           // 指向对应的真实dom元素，类组件指向组件实例，可以被ref获取。
  this.return = null;              // 指向父级fiber
  this.child = null;               // 指向子级fiber
  this.sibling = null;             // 指向兄弟fiber 
  this.index = 0;                  // 索引
  this.ref = null;                 // ref指向，ref函数，或者ref对象。
  this.pendingProps = pendingProps;// 在一次更新中，代表element创建
  this.memoizedProps = null;       // 记录上一次更新完毕后的props
  this.updateQueue = null;         // 类组件存放setState更新队列，函数组件存放
  this.memoizedState = null;       // 类组件保存state信息，函数组件保存hooks信息，dom元素为null
  this.dependencies = null;        // context或是时间的依赖项
  this.mode = mode;                //描述fiber树的模式，比如 ConcurrentMode 模式
  this.effectTag = NoEffect;       // effect标签，用于收集effectList
  this.nextEffect = null;          // 指向下一个effect
  this.firstEffect = null;         // 第一个effect
  this.lastEffect = null;          // 最后一个effect
  this.expirationTime = NoWork;    // 通过不同过期时间，判断任务是否过期， 在v17版本用lane表示。
  this.alternate = null;           //双缓存树，指向缓存的fiber。更新阶段，两颗树互相交替。
}

export const FunctionComponent = 0;       // 对应函数组件
export const ClassComponent = 1;          // 对应的类组件
export const IndeterminateComponent = 2;  // 初始化的时候不知道是函数组件还是类组件 
export const HostRoot = 3;                // Root Fiber 可以理解为跟元素 ， 通过reactDom.render()产生的根元素
export const HostPortal = 4;              // 对应  ReactDOM.createPortal 产生的 Portal 
export const HostComponent = 5;           // dom 元素 比如 <div>
export const HostText = 6;                // 文本节点
export const Fragment = 7;                // 对应 <React.Fragment> 
export const Mode = 8;                    // 对应 <React.StrictMode>   
export const ContextConsumer = 9;         // 对应 <Context.Consumer>
export const ContextProvider = 10;        // 对应 <Context.Provider>
export const ForwardRef = 11;             // 对应 React.ForwardRef
export const Profiler = 12;               // 对应 <Profiler/ >
export const SuspenseComponent = 13;      // 对应 <Suspense>
export const MemoComponent = 14;          // 对应 React.memo 返回的组件

export default class Parent extends React.Component{
   render(){
     return <div>
       <h1>hello，world</h1>
       <Child />
     </div>
   }
}
function Child() {
  return <p>child</p>
}

const jsx = (
  <div className="border">
    <h1>hello</h1>
    <a href="https://www.reactjs.org/" rel="external nofollow" >React</a>
  </div>
)
ReactDOM.render(
  jsx,
  document.getElementById('root')
);

function createFiberRoot(element, container){
    return {
    type: container.nodeName.toLocaleLowerCase(),
    props: { children: element },
    stateNode: container
  }
}
function render(element, container) {
  const FibreRoot = createFiberRoot(element, container)
  scheduleUpdateOnFiber(FibreRoot)
}
export default { render }

let wipRoot = null // work in progress
let nextUnitOfwork = null // 下一个fiber节点
export function scheduleUpdateOnFiber(fiber) {
  wipRoot = fiber
  nextUnitOfwork = fiber
}
function workLoop(IdleDeadline) {
  while(nextUnitOfwork && IdleDeadline.timeRemaining() > 0) {
    nextUnitOfwork = performUnitOfWork(nextUnitOfwork)
  }
}
function performUnitOfWork() {}
requestIdleCallback(workLoop)

import { updateHostComponent } from './ReactFiberReconciler'
function performUnitOfWork(wip) {
  // 1. 更新wip
  const { type } = wip
  if (isStr(type)) {
    // type是string，更新普通元素节点
    updateHostComponent(wip)
  } else if (isFn(type)) {
    // ...
  }
  // 2. 返回下一个要更新的任务 深度优先遍历
  if (wip.child) {
    return wip.child
  }
  let next = wip
  while(next) {
    if (next.sibling) {
      return next.sibling
    }
    next = next.return
  }
  return null
}

import { createFiber } from './createFiber'
export function updateHostComponent(wip) {
  if (!wip.stateNode) {
    wip.stateNode = document.createElement(wip.type);
    updateNode(wip.stateNode, wip.props);
  }
  // 调和子节点
  reconcileChildren(wip, wip.props.children);
}
function reconcileChildren(returnFiber, children) {
  if (isStr(children)) {
    return
  }
  const newChildren = isArray(children) ? children : [children];
  let previousNewFiber = null
  for(let i = 0; i < newChildren.length; i++) {
    const newChild = newChildren[i];
    const newFiber = createFiber(newChild, returnFiber)
    if (previousNewFiber === null) {
      returnFiber.child = newFiber
    } else {
      previousNewFiber.sibling = newFiber
    }
    previousNewFiber = newFiber
  }
}
function updateNode(node, nextVal) {
  Object.keys(nextVal).forEach((k) => {
    if (k === "children") {
      if (isStringOrNumber(nextVal[k])) {
        node.textContent = nextVal[k];
      }
    } else {
      node[k] = nextVal[k];
    }
  });
}

export function createFiber(vnode, returnFiber) {
  const newFiber = {
    type: vnode.type,   // 标记节点类型
    key: vnode.key,     // 标记节点在当前层级下的唯一性
    props: vnode.props, // 属性
    stateNode: null,    // 如果组件是原生标签则是dom节点，如果是类组件则是类实例
    child: null,        // 第一个子节点
    return: returnFiber,// 父节点
    sibling: null,      // 下一个兄弟节点
  };
  return newFiber;
}

function workLoop(IdleDeadline) {
  while(nextUnitOfwork && IdleDeadline.timeRemaining() > 0) {
    nextUnitOfwork = performUnitOfWork(nextUnitOfwork)
  }
  // commit
  if (!nextUnitOfwork && wipRoot) {
    commitRoot();
  }
}
function commitRoot() {
  commitWorker(wipRoot.child)
  wipRoot = null;
}
function commitWorker(wip) {
  if (!wip) {
    return
  }
  // 1. 提交自己
  const { stateNode } = wip
  let parentNode = wip.return.stateNode
  if (stateNode) {
    parentNode.appendChild(stateNode);
  }
  // 2. 提交子节点
  commitWorker(wip.child);
  // 3. 提交兄弟节点
  commitWorker(wip.sibling);
}