手写 React 第 4 节 - 实现 Fiber

- 日理万妓 2022-12-18 13:58 150阅读 0赞

### 手写 React 第 4 节 - 实现 Fiber ###

*   *   *  前言
         *  1. Fiber 的作用
         *  2. Fiber 数据结构
         *  3. 实现 Fiber

### 前言 ###

在上一节[【手写 React 第 3 节 - 实现函数组件/类组件】][React _ 3 _ -]中实现了函数组件和类组件，本小节主要介绍 Fiber 的作用以及如何实现 Fiber。

### 1. Fiber 的作用 ###

Fiber 是 React 16 之后才出来的，React 16 之前是没有 Fiber 的。Fiber 的作用主要是避免渲染中断出现异常以及控制页面渲染的优先权。

Fiber 的工作机制是将页面渲染的实现逻辑变成颗粒度更小的工作单元，并调用浏览器内置的 `requestIdleCallback` 方法。该方法会在浏览器空闲时间执行函数，使页面渲染减少卡顿，并实现渲染优先级。

### 2. Fiber 数据结构 ###

function FiberNode(tag, pendingProps, key, mode) { 
      //节点类型
      this.type = null;
      //节点属性
      this.props = props;
      // Fiber对应的真实 DOM 节点
      this.stateNode = null; 
      // 以下属性用于连接其他 Fiber 节点形成 Fiber 树。
      // 指向父Fiber节点
      this.return = null;
      //指向第一个子Fiber节点
      this.child = null;
      //指向右边第一个兄弟Fiber节点
      this.sibling = null;
    }

import React from './react/index';
    import ReactDOM from './react/react-dom';
    import './index.css';
    const App = (
        <div>
            <p>
                <h1 className="border">Mini React</h1>
                <span>fiber</span>
            </p>
            <div><span>fiber</span></div>
        </div>
    )
    ReactDOM.render(App,document.getElementById('root'));

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]

在以上树结构中，采用深度优先遍历，节点规则如下：  
A 节点的 return(父节点) 为 null，child 为 B 节点，sibling 为 null。  
B 节点的 return(父节点) 为 A 节点，child 为 D 节点，sibling 为 C 节点。  
D 节点的 return(父节点) 为 B 节点，child 为 null，sibling 为 E 节点。  
E 节点的 return(父节点) 为 B 节点，child 为 null，sibling 为 null。  
C节点的 return(父节点) 为 A 节点，child 为 F 节点，sibling 为 null。  
F 节点的 return(父节点) 为 C 节点，child 为 null，sibling 为 null。

通过以上遍历后会构成一个 Fiber 链表结构。

### 3. 实现 Fiber ###

1.  在 `render` 中定义根节点 `rootFiber`，并将下一个单元工作 `nextUnitOfWork` 指向 `rootFiber`。可以理解为定义一个 Fiber 链表结构的表头。

//1.定义链表结构的表头
    function render(vnode,container) { 
       rootFiber = { 
           stateNode:container,
           props:{ 
               children:[vnode]
           }
       }
       nextUnitOfWork = rootFiber;
    }

1.  开启 requestIdleCallback

//2.开启 requestIdleCallback
    requestIdleCallback(workLoop);

1.  进入工作循环

首先构建链表结构，然后将链表结构插入到真实 DOM 节点。

function workLoop(deadline) { 
        //3.1 构建 fiber 链表结构
        while(nextUnitOfWork && deadline.timeRemaining()>1){ 
            nextUnitOfWork = performUnitOfWork(nextUnitOfWork)
        }
        //3.2 构建完成之后，插入到真实 DOM
        if(!nextUnitOfWork && rootFiber){ 
            commitRoot();
        }
    }

3.1 构建 fiber 链表结构

首先构建当前 fiber 链表结构，再返回下一个 fiber

function performUnitOfWork(workInProcess) { 
        //3.1.1 更新当前 fiber 节点的链表结构
       updateHostComponent(workInProcess);
       //3.1.2 返回下一个 fiber 节点
       return nextFiberWork(workInProcess);
    }

3.1.1 更新当前 fiber 节点的链表结构

//3.1.1 更新当前 fiber 节点的链表结构
    function updateHostComponent(workInProcess){ 
        if(!workInProcess.stateNode){ 
            workInProcess.stateNode = createNode(workInProcess);
        }
        reconcileChildren(workInProcess,workInProcess.props.children)
    }
    //创建真实 DOM 节点
    function createNode(vnode,container) { 
        const { type,props} = vnode;
        let node;
        if(type === 'TEXT'){ 
            node = document.createTextNode("");
        }else if(typeof type === 'string'){ 
            node = document.createElement(type);
        }else if(typeof type === 'function'){ 
            node = type.prototype.isReactComponent?updateClassComponent(vnode,container):updateFunctionComponent(vnode,container)
        }
        reconcileChildren(vnode,props.children);
        updateNode(node,props);
        return node;
    }
    // 创建子节点的 fiber 结构
    function reconcileChildren(fiber,children) { 
        let prevSibling = null;
        for(let i = 0;i<children.length;i++){ 
            let child = children[i];
            let newFiber = { 
                type:child.type,
                props:child.props,
                stateNode:null,
                return:fiber,
                child:null,
                sibling:null
            }
            if(i === 0){ 
                fiber.child = newFiber;
            }else { 
                prevSibling.sibling = newFiber;
            }
            prevSibling = newFiber;
        }
    }
    
    //更新节点属性
    function updateNode(node,props) { 
        for(let i in props){ 
            if(i!='children'){ 
                node[i] = props[i]
            }
        }
    }
    //更新类组件
    function updateClassComponent(workInProcess,node) { 
        const { type,props} = workInProcess;
        let instance = type(addProps(props));
        return createNode(instance,node);
    }
    //更新函数组件
    function updateFunctionComponent(workInProcess,node) { 
        const { type,props} = workInProcess;
        let instance = new type(addProps(props));
        return createNode(instance.render(),node);
    }
    //处理类组件和函数组件的属性
    function addProps(props) { 
        let keys = Object.keys(props);
        if(Array.isArray(keys) && keys.length>0){ 
            let newProps = { },isProps;
            keys.map(key=>{ 
                if(key!='children'){ 
                    isProps = true;
                    newProps[key] = props[key];
                }
            })
            if(isProps){ 
                return newProps;
            }
        }
    }

3.1.2 返回下一个 fiber 节点

//3.1.2 返回下一个 fiber 节点
    function nextFiberWork(workInProcess) { 
       if(workInProcess.child){ 
           return workInProcess.child
       };
       let nextFiber = workInProcess;
       while (nextFiber){ 
           if(nextFiber.sibling){ 
               return nextFiber.sibling
           }else { 
               nextFiber = nextFiber.return;
           }
       }
    }

3.2 构建完成之后，插入到真实 DOM

//3.2 构建完成之后，插入到真实 DOM
    function commitRoot() { 
        commitWorker(rootFiber.child);
        rootFiber = null;
    }
    function commitWorker(fiber){ 
        if(!fiber){ 
            return;
        }
        //获取 fiber 父节点
        let parentNodeFiber = fiber.return;
        while(!parentNodeFiber.stateNode){ 
            parentNodeFiber.stateNode = parentNodeFiber.return;
        }
        //获取真实 DOM 父节点
        let parentNode = parentNodeFiber.stateNode;
        if(fiber.stateNode){ 
            //将当前真实节点插入到父节点
            parentNode.appendChild(fiber.stateNode);
        }
        commitWorker(fiber.child);
        commitWorker(fiber.sibling);
    }

[React _ 3 _ -]: https://blog.csdn.net/weixin_44135121/article/details/109352396
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEzNTEyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/224c942fea6f4a07909485485cd4aca9.png