一个简易版的代码实现

schedule

  1. import { TAG_ROOT, TAG_TEXT, TAG_HOST, ELEMENT_TEXT, PLACEMENT, DELETION, UPDATE, TAG_CLASS, TAG_FUNCTION_COMPONENT } from "./constant";
  2. import { setProps } from './utils';
  3. import { UpdateQueue, Update } from "./UpdateQueue";
  5. /**
  6.  * 从根节点开始渲染和调度，
  7.  * 两个阶段：
  8.  *  1. diff阶段(render阶段)：对比新旧的虚拟DOM，进行增量更新或者创建
  9.  *     根据虚拟DOM进行任务拆分。这个阶段可以中断。
  10.  *     render阶段的任务： (1) 生成Fiber   (2) 收集Effect List 
  11.  *  2. commit阶段，进行DOM更新
  12.  */
  13. let nextUnitOfWork = null; // 下一个工作单元，
  14. let workInProgressRoot = null; // RootFiber 应用的根  // 正在渲染的根Root Fiber
  15. let currentRoot = null;
  17. let deletions = []; // 删除的节点，我们并不放在effect list里面， 所以需要单独记录并且执行。
  19. let workingProgressFiber = null; // 正在工作中的fiber
  20. let hookIndex = 0; // hooks 索引
  22. export function scheduleRoot(rootFiber) { // {tag: TAG_ROOT, stateNode:container, props:{children:[element]}}
  23.     if (currentRoot && currentRoot.alternate) { // 第二次之后的更新
  24.         workInProgressRoot = currentRoot.alternate; // 第一次渲染出来的那个fiber tree
  25.         workInProgressRoot.alternate = currentRoot; // 让这个树的替身指向当前的currentRoot;
  26.         if (rootFiber) {
  27.             workInProgressRoot.props = rootFiber.props; // 让它的props更新成新的props
  28.         }
  29.     } else if (currentRoot) { // 说明至少已经渲染过一次了
  30.         if (rootFiber) {
  31.             rootFiber.alternate = currentRoot;
  32.             workInProgressRoot = rootFiber; // 挂载后不变。
  33.         } else {
  34.             workInProgressRoot = {
  35.                 ...currentRoot,
  36.                 alternate: currentRoot
  37.             }
  38.         }
  39.     } else { // 如果是第一次渲染
  40.         workInProgressRoot = rootFiber; // 挂载后不变。
  41.     }
  42.     workInProgressRoot.firstEffect = workInProgressRoot.lastEffect = workInProgressRoot.nextEffect = null;
  43.     nextUnitOfWork = workInProgressRoot; // 一直在变。
  44. }
  46. //
  47. function performUnitOfWork(currentFiber) {
  48.     beginWork(currentFiber);
  49.     // 由于经过beginWork的调和，如果currentFiber的props.children有值，就会在currentFiber加上了child，指向第一个Fiber子元素。
  50.     if (currentFiber.child) {
  51.         return currentFiber.child;
  52.     }
  54.     // 如果不存在child， 那么这个任务就已经完成了，需要继续查看sibling,
  55.     while (currentFiber) {
  56.         completeUnitOfWork(currentFiber);
  57.         if (currentFiber.sibling) {
  58.             return currentFiber.sibling;
  59.         } else {
  60.             currentFiber = currentFiber.return; // 先找到父亲，然后让父亲完成。
  61.         }
  62.     }
  63. }
  65. // 在完成的时候需要收集有副作用的Fiber，然后组成effect list
  66. // 每个fiber有两个属性， 
  67. // firstEffect指向第一个有副作用的子Fiber
  68. // lastEffect指向最后一个有副作用的子Fiber
  69. // 中间的用nextEffect做成一个单链表 
  70. function completeUnitOfWork(currentFiber) { // 第一个完成的A1TEXT
  71.     console.log('收集副作用：', currentFiber.tag, currentFiber.stateNode);
  72.     // 准备形成Effect List
  73.     let returnFiber = currentFiber.return; // A1
  74.     if (returnFiber) {
  75.         // 1.把自己儿子的effect链挂到父亲身上
  76.         if (!returnFiber.firstEffect) {
  77.             returnFiber.firstEffect = currentFiber.firstEffect;
  78.         }
  79.         if (currentFiber.lastEffect) {
  80.             if (returnFiber.lastEffect) {
  81.                 // TODO: 这边为什么是这样的？？？
  82.                 returnFiber.lastEffect.nextEffect = currentFiber.firstEffect;
  83.             }
  84.             returnFiber.lastEffect = currentFiber.lastEffect;
  85.         }
  87.         // 2. 把自己挂到父亲身上
  88.         const effectTag = currentFiber.effectTag;
  89.         if (effectTag) {// 自己有副作用
  90.             if (returnFiber.lastEffect) {
  91.                 returnFiber.lastEffect.nextEffect = currentFiber;
  92.             } else {
  93.                 returnFiber.firstEffect = currentFiber;
  94.             }
  95.             returnFiber.lastEffect = currentFiber;
  97.         }
  98.     }
  99. }
  101. /**
  102.  * beiginWork
  103.  * 1. 创建真实DOM元素
  104.  * 2. 创建子Fiber
  105.  */
  106. function beginWork(currentFiber) {
  107.     if (currentFiber.tag === TAG_ROOT) { // 根fiber
  108.         updateHostRoot(currentFiber);
  109.     } else if (currentFiber.tag === TAG_TEXT) { // 文本fiber
  110.         updateHostText(currentFiber);
  111.     } else if (currentFiber.tag === TAG_HOST) { // 原生DOM节点
  112.         updateHost(currentFiber);
  113.     } else if (currentFiber.tag === TAG_CLASS) { // 类组件
  114.         updateClassComponent(currentFiber);
  115.     } else if (currentFiber.tag === TAG_FUNCTION_COMPONENT) {
  116.         updateFunctionComponent(currentFiber);
  117.     }
  118. }
  120. /**
  121.  * 因为是根Fiber， 所以本身就存在真实DOM元素   #root；
  122.  * 直接开始遍历children，创建子Fiber;
  123.  */
  124. function updateHostRoot(currentFiber) {
  125.     let newChildren = currentFiber.props.children; // [element]
  126.     reconcileChildren(currentFiber, newChildren);
  127. }
  129. function updateHostText(currentFiber) {
  130.     // 如果此Fiber没有创建DOM节点，那么就需要创建
  131.     if (!currentFiber.stateNode) {
  132.         currentFiber.stateNode = createDOM(currentFiber);
  133.     }
  134. }
  135. function updateHost(currentFiber) {
  136.     if (!currentFiber.stateNode) {
  137.         currentFiber.stateNode = createDOM(currentFiber);
  138.     }
  139.     let newChildren = currentFiber.props.children; // [element]
  140.     reconcileChildren(currentFiber, newChildren);
  142. }
  143. function updateClassComponent(currentFiber) {
  144.     if (!currentFiber.stateNode) { // 类组件 stateNode 是组件的实例
  145.         // new ClassCounter();
  146.         // fiber和类组件实例 双向指向
  147.         currentFiber.stateNode = new currentFiber.type(currentFiber.props);
  148.         currentFiber.stateNode.internalFiber = currentFiber;
  149.         currentFiber.updateQueue = new UpdateQueue();
  151.     }
  152.     // 给组件的实例的state赋值
  153.     currentFiber.stateNode.state = currentFiber.updateQueue.forceUpdate(currentFiber.stateNode.state);
  154.     let newElement = currentFiber.stateNode.render();
  155.     const newChildren = [newElement];
  156.     reconcileChildren(currentFiber, newChildren);
  157. }
  159. function updateFunctionComponent(currentFiber) {
  160.     workingProgressFiber = currentFiber;
  161.     hookIndex = 0;
  162.     workingProgressFiber.hooks = [];
  164.     const newChildren = [currentFiber.type(currentFiber.props)]
  165.     reconcileChildren(currentFiber, newChildren);
  166. }
  168. function createDOM(currentFiber) {
  169.     if (currentFiber.tag === TAG_TEXT) {
  170.         return document.createTextNode(currentFiber.props.text);
  171.     } else if (currentFiber.tag === TAG_HOST) {
  172.         let stateNode = document.createElement(currentFiber.type);
  173.         updateDOM(stateNode, {}, currentFiber.props);
  174.         return stateNode;
  175.     }
  176. }
  178. function updateDOM(stateNode, oldProps, newProps) {
  179.     if (stateNode && stateNode.setAttribute) {
  180.         setProps(stateNode, oldProps, newProps);
  181.     }
  182. }
  184. // newChildren是一个虚拟DOM的数组， 把虚拟DOM转成Fiber
  185. function reconcileChildren(currentFiber, newChildren) {
  186.     let newChildIndex = 0; // 新子节点的索引，
  187.     let prevSibling;
  188.     // 如果说currentFiber有alternate并且alternate有child属性；
  189.     let oldFiber = currentFiber.alternate && currentFiber.alternate.child;
  190.     if (oldFiber) {
  191.         oldFiber.firstEffect = oldFiber.lastEffect = oldFiber.nextEffect = null;
  192.     }
  195.     while (newChildIndex < newChildren.length || oldFiber) {
  196.         let newChild = newChildren[newChildIndex]; // 取出虚拟DOM节点。
  197.         let tag;
  198.         let newFiber; // 新的Fiber；
  199.         const sameType = oldFiber && newChild && oldFiber.type === newChild.type;
  201.         if (newChild && newChild.type === ELEMENT_TEXT) {
  202.             // 文本节点
  203.             tag = TAG_TEXT;
  204.         } else if (newChild && typeof newChild.type === 'string') {
  205.             //原生dom节点   div p span
  206.             tag = TAG_HOST;
  207.         } else if (newChild && typeof newChild.type === 'function' && newChild.type.prototype.isReactComponent) {
  208.             tag = TAG_CLASS;
  209.         } else if (newChild && typeof newChild.type === 'function') {
  210.             tag = TAG_FUNCTION_COMPONENT;
  211.         }
  212.         if (sameType) { // 说明老fiber和新虚拟DOM类型是一样的， 可以直接复用老的DOM节点，更新即可。
  214.             if (oldFiber.alternate) { // 说明至少已经更新一次了，复用，减少对象的创建。
  215.                 // 上上棵树的tag,type等属性肯定是一样的， 因为alternate的赋值是在sameType中。
  217.                 newFiber = oldFiber.alternate;
  218.                 newFiber.props = newChild.props;
  219.                 newFiber.alternate = oldFiber;
  220.                 newFiber.effectTag = UPDATE;
  221.                 newFiber.nextEffect = null;
  222.                 newFiber.updateQueue = oldFiber.updateQueue || new UpdateQueue();
  223.                 // 
  224.                 // newFiber.stateNode = oldFiber.stateNode; // 
  225.                 // newFiber.return = currentFiber; // 父Fiber, 
  226.             } else {
  227.                 newFiber = {
  228.                     tag: oldFiber.tag,
  229.                     type: oldFiber.type,
  230.                     props: newChild.props,
  231.                     stateNode: oldFiber.stateNode, // 
  232.                     return: currentFiber, // 父Fiber, 
  233.                     effectTag: UPDATE, // 副作用标识， render我们要收集副作用，
  234.                     alternate: oldFiber,
  235.                     nextEffect: null,
  236.                     updateQueue: oldFiber.updateQueue || new UpdateQueue()
  237.                 }
  238.             }
  240.         } else {
  241.             // 如果两两比较时候不一样，那就删除老的，添加新的。
  243.             if (newChild) {
  244.                 newFiber = {
  245.                     tag,
  246.                     type: newChild.type,
  247.                     props: newChild.props,
  248.                     stateNode: null,
  249.                     return: currentFiber, // 父Fiber, 
  250.                     effectTag: PLACEMENT, // 副作用标识， render我们要收集副作用，
  251.                     nextEffect: null,
  252.                     updateQueue: new UpdateQueue()
  253.                 }
  254.             }
  255.             if (oldFiber) {
  256.                 oldFiber.effectTag = DELETION;
  257.                 deletions.push(oldFiber);
  258.             }
  259.         }
  260.         if (oldFiber) {
  261.             oldFiber = oldFiber.sibling;
  262.         }
  263.         if (newFiber) {
  264.             if (newChildIndex === 0) {
  265.                 currentFiber.child = newFiber;
  266.             } else {
  267.                 prevSibling.sibling = newFiber;
  268.             }
  269.             prevSibling = newFiber;
  270.         }
  271.         newChildIndex++;
  272.     }
  274. }
  276. // 循环执行工作 
  277. function workLoop(deadline) {
  278.     let shouldYield = false;
  279.     while (nextUnitOfWork && !shouldYield) {
  280.         nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  281.         shouldYield = deadline.timeRemaining() < 1; // 没有时间的话就要让出控制权。
  282.     }
  283.     if (!nextUnitOfWork && workInProgressRoot) {
  284.         console.log('render阶段结束');
  285.         console.log("最终形成的Fiber链：", workInProgressRoot);
  286.         commitRoot();
  287.     } else {
  289.     }
  290.     // 如果时间片到期后还有任务没有完成， 就需要请求浏览器再次调度。
  291.     requestIdleCallback(workLoop, { timeout: 500 });
  293. }
  295. function commitRoot() {
  296.     console.log('commitRoot', workInProgressRoot);
  297.     deletions.forEach(commitWork); // 执行effect list之前，先把该删除的元素删除
  299.     let currentFiber = workInProgressRoot.firstEffect;
  300.     while (currentFiber) {
  301.         commitWork(currentFiber);
  302.         currentFiber = currentFiber.nextEffect;
  303.     }
  304.     deletions.length = 0; // 提交之后要清空deletion数组
  306.     currentRoot = workInProgressRoot; // 把当前渲染成功的根Fiber赋给currentRoot;
  308.     workInProgressRoot = null;
  309. }
  311. function commitWork(currentFiber) {
  312.     if (!currentFiber) return;
  313.     let returnFiber = currentFiber.return;
  314.     while (
  315.         returnFiber.tag !== TAG_HOST &&
  316.         returnFiber.tag !== TAG_ROOT &&
  317.         returnFiber.tag !== TAG_TEXT
  318.     ) {
  319.         returnFiber = returnFiber.return;
  320.     }
  321.     let returnDOM = returnFiber.stateNode;
  322.     if (currentFiber.effectTag === PLACEMENT) { // 新增节点
  323.         let nextFiber = currentFiber;
  324.         // 优化： 如果是类组件，其实可以直接return
  325.         if (nextFiber.tag === TAG_CLASS) {
  326.             return;
  327.         }
  328.         // 如果要挂载的节点不是DOM节点，比如说是类组件Fiber，一直找第一个儿子，直到找到一个真实DOM节点为止。
  329.         while (
  330.             nextFiber.tag !== TAG_HOST &&
  331.             nextFiber.tag !== TAG_ROOT &&
  332.             nextFiber.tag !== TAG_TEXT
  333.         ) {
  334.             nextFiber = nextFiber.child;
  335.         }
  336.         returnDOM.appendChild(nextFiber.stateNode);
  337.     } else if (currentFiber.effectTag === DELETION) {// 删除节点
  338.         return commitDeletion(currentFiber, returnDOM);
  339.         // returnDOM.removeChild(currentFiber.stateNode);
  340.     } else if (currentFiber.effectTag === UPDATE) {
  341.         if (currentFiber.type === ELEMENT_TEXT) {
  342.             if (currentFiber.alternate.props.text != currentFiber.props.text) {
  343.                 currentFiber.stateNode.textContent = currentFiber.props.text;
  344.             } else {
  346.                 updateDOM(currentFiber.stateNode, currentFiber.alternate.props, currentFiber.props);
  347.             }
  348.         }
  349.     }
  350.     currentFiber.effectTag = null;
  352. }
  354. function commitDeletion(currentFiber, domReturn) {
  355.     if (currentFiber.tag == TAG_HOST || currentFiber.tag == TAG_TEXT) {
  356.         domReturn.removeChild(currentFiber.stateNode);
  357.     } else {
  358.         commitDeletion(currentFiber.child, domReturn);
  359.     }
  360. }
  362. /**
  363.  * 
  364.  * workingProgressFiber = currentFiber;
  365.  * hookIndex = 0;
  366.  * workingProgressFiber.hooks = [];
  367.  */
  368. export function useReducer(reducer, initialValue) {
  369.     let newHook = workingProgressFiber.alternate && workingProgressFiber.alternate.hooks && workingProgressFiber.alternate.hooks[hookIndex];
  371.     if (newHook) {
  372.         console.log(hookIndex, newHook);
  374.         // 第二次渲染 
  375.         newHook.state = newHook.updateQueue.forceUpdate(newHook.state);
  377.     } else {
  378.         newHook = {
  379.             state: initialValue,
  380.             updateQueue: new UpdateQueue()
  381.         }
  382.     }
  383.     // const dispatch = null;
  384.     const dispatch = action => { // {type: 'ADD'}
  385.         let payload = reducer ? reducer(newHook.state, action) : action;
  387.         newHook.updateQueue.enqueueUpdate(
  388.             new Update(payload)
  389.         );
  390.         scheduleRoot();
  391.     }
  392.     workingProgressFiber.hooks[hookIndex++] = newHook;
  393.     return [newHook.state, dispatch];
  394. }
  396. export function useState (initialValue){
  397.     return useReducer(null, initialValue);
  398. }
  400. requestIdleCallback(workLoop, { timeout: 500 });

UpdateQueue

  2. export class Update {
  3.     constructor(payload) {
  4.         this.payload = payload
  5.     }
  6. }
  8. // 数据结构：是一个单链表
  9. export class UpdateQueue {
  10.     constructor() {
  11.         this.firstUpdate = null;
  12.         this.lastUpdate = null;
  13.     }
  15.     enqueueUpdate(update) {
  16.         if (this.lastUpdate === null) {
  17.             this.firstUpdate = this.lastUpdate = update;
  18.         } else {
  19.             this.lastUpdate.nextUpdate = update;
  20.             this.lastUpdate = update;
  21.         }
  22.     }
  24.     forceUpdate(state) {
  25.         let currentUpdate = this.firstUpdate;
  26.         // TODO: 
  27.         while(currentUpdate){
  28.             console.log(currentUpdate,'~~~~')
  29.             let nextState = typeof currentUpdate.payload === 'function' ? currentUpdate.payload(state) : currentUpdate.payload;
  30.             state = {...state, ...nextState};
  31.             currentUpdate = currentUpdate.nextUpdate;
  32.         }
  33.         this.firstUpdate = this.lastUpdate = null;
  34.         return state;
  35.     }
  36. }

react-dom

  1. import { TAG_ROOT } from "./constant";
  2. import { scheduleRoot} from './schedule';
  4. function render(element, container){
  5.     let rootFiber = {
  6.         tag:TAG_ROOT, // 每个Fiber会有一个tag标识此元素的类型
  7.         stateNode: container, // 指向真实的DOM元素
  8.         props: {
  9.             children: [element] // 放置需要渲染的React元素，即虚拟DOM元素。
  10.         }
  11.     }
  12.     scheduleRoot(rootFiber);
  13. }
  15. const ReactDOM = {
  16.     render
  17. }
  19. export default ReactDOM;

react

  2. import { ELEMENT_TEXT } from "./constant";
  3. import { UpdateQueue, Update} from './UpdateQueue';
  4. import { scheduleRoot, useReducer, useState } from "./schedule";
  6. /**
  7.  * 创建元素（虚拟DOM）
  8.  * @param {} type 元素的类型 div span p
  9.  * @param {*} config 配置对象 属性 key ref
  10.  * @param  {...any} children 放着所有的儿子，做成一个数组。
  11.  */
  12. function createElement(type,config, ...children){
  13.     // 删除不必要的属性，简化代码
  14.     delete config.__self;
  15.     delete config.__source;
  16.     return {
  17.         type,
  18.         props: {
  19.             ...config,
  20.             children:children.map(child => {
  21.                 return typeof child === 'object'? child: {
  22.                     type: ELEMENT_TEXT,
  23.                     props: {
  24.                         text: child,
  25.                         children: []
  26.                     }
  27.                 }
  28.             })
  29.         }
  30.     }
  31. }
  32. class Component {
  33.     constructor(props){
  34.         this.props = props;
  35.         this.updateQueue = new UpdateQueue();
  36.     }
  37.     setState(payload){ //可能是对象，也可能是一个函数
  38.         let update = new Update(payload);
  39.         // updateQueue其实是放在此类组件对应的fiber节点的internalFiber;
  40.         this.internalFiber.updateQueue.enqueueUpdate(update);
  41.         // this.updateQueue.enqueueUpdate(update);
  42.         scheduleRoot(); // 从根节点开始调度；
  43.     }
  44. }
  45. Component.prototype.isReactComponent = {}; // 类组件
  48. const React = {
  49.     createElement,
  50.     Component,
  51.     useReducer,
  52.     useState
  53. }
  55. export default React;