搜索

Fiber架构的简单理解与实现

web前端开发

共 21494字，需浏览 43分钟

 ·

2020-11-05 12:23

来源 | http://www.fly63.com/article/detial/9789


1、简介

本文主要理解fiber的基本原理。为了能够更好的理解fiber原理，我们会从零开始构建一个简单的react，并在其中引入fiber以及useState hook，DOM-DIFF等。

2、react基础

1）、jsX语法
jsX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。所以无法像JavaScript一样被直接执行。

// JSXlet age = 18;let element = (    <div>        <h1>age: {age}h1>        <button onClick={() => alert(18)}>修改age的值button>    div>);

上面这段JSX看起来非常像html，但是它又不仅仅是html，其具有一定的JavaScript能力，比如可以通过{}去读取变量，以及进行一些运算等等。
上面这段JSX会被放到.js文件中，如果我们直接执行，那么会报错。

而在React中之所以能够执行，是因为借助了Babel的转换，最终会被解析成JS成一段JS。上面这段代码会被解析为，如下所示：

let age = 18;let element = React.createElement("div", {},     React.createElement("h1", {}, "age: ", age),    React.createElement("button", {        onClick: function onClick() {            return alert(18);        }    }, "修改age的值"));

所以React只要提供createElement()方法就可以正确解析上面这段JSX了。

2）、实现createElement()方法
createElement()方法主要负责接收JSX被Babel解析后传递过来的参数，而其主要作用就是解析参数，并最终返回一个虚拟DOM对象。

function createElement(type, config, ...children) { // Babel解析后传递的config肯定是一个对象，不管JSX中有没有设置属性    delete config.__source; // ——souce属性和__self属性太复杂直接移除    delete config.__self;    const props = {...config};    props.children = children.map((child) => { // 遍历子节点，主要处理一些纯文本        return typeof child === "object" ? child : createTextElement(child)    });    return { // 构造一个虚拟DOM节点        type,        props    }}
function createTextElement(text) { // 专门处理纯文本，将纯文本转化成一个React虚拟DOM节点    return {        type: "TEXT",        props: {            nodeValue: text,            children: []        }    }}

经过createElement()方法的处理，就能将JSX转换为对应的虚拟DOM节点。

3）、实现render()方法
render(vdom, container)方法会接收一个虚拟DOM对象和一个真实的容器DOM作为虚拟DOM渲染完成后的挂载点。

其主要作用就是将虚拟DOM渲染为真实DOM并挂载到容器下。

function render(vdom, container) {    let dom;    let props = vdom.props;    if (vdom.type === "TEXT") { // 是文本节点        dom = document.createTextNode("");    } else {        dom = document.createElement(vdom.type);    }    updateProperties(dom, props); // 更新DOM属性    vdom.props.children.forEach((child) => { // 遍历子节点，递归调用render()方法将子节点渲染出来        render(child, dom);    });    container.appendChild(dom); // 整个虚拟DOM渲染完成后将其加入到容器中进行挂载到页面上}
function updateProperties(dom, props) {    for (let key in props) { // 遍历属性并更新到DOM节点上        if (key !== "children") {            if (key.slice(0, 2) === "on") {                dom.addEventListener(key.slice(2).toLowerCase(), props[key], false);            } else {                dom[key] = props[key];            }        }    }}

3、Fiber简介

Fiber在英文中的意思为“纤维化”，即细化，将任务进行细化。我们可以把一个耗时长的任务分成很多小片，每一个小片的运行时间很短，虽然总时间依然很长，但是在每个小片执行完之后，都给其他任务一个执行的机会，这样唯一的线程就不会被独占，其他任务依然有运行的机会。

React中的Fiber就把整个更新过程碎片化。
上面我们的render()方法在更新的时候是进行递归操作的，如果在更新的过程中有大量的节点需要更新，就会出现长时间占用JS主线程的情况，并且整个递归过程是无法被打断的，由于JS线程和GUI线程是互斥的，所以可能会看到UI卡顿。

所以要实现Fiber架构，必须要解决两个问题:
a. 保证任务在浏览器空闲的时候执行；
b. 将任务进行碎片化；

1）、requestIdleCallback
requestIdleCallback(callback)是实验性API，可以传入一个回调函数，回调函数能够收到一个deadline对象，通过该对象的timeRemaining()方法可以获取到当前浏览器的空闲时间，如果有空闲时间，那么就执行一小段任务，如果时间不足了，则继续requestIdleCallback，等到浏览器又有空闲时间的时候再接着执行。

2）、链表结构
目前的虚拟DOM是树结构，当任务被打断后，树结构无法恢复之前的任务继续执行，所以需要一种新的数据结构，即链表，链表可以包含多个指针，可以轻易找到下一个节点，继而恢复任务的执行。

Fiber采用的链表中包含三个指针，parent指向其父Fiber节点，child指向其子Fiber节点，sibling指向其兄弟Fiber节点。一个Fiber节点对应一个任务节点。

4、实现Fiber

1）、保证任务在浏览器空闲的时候执行
定义一个工作循环回调函数，并通过requestIdleCallback注册，通过判断当前Fiber是否存在以及浏览器是否有空闲时间来判断是否需要打断任务执行。

// 新增如下代码let currentFiber; // 保存当前工作的Fiber节点let rootFiber; // 根Fiber节点，render()方法内会进行初始化function commitRoot() {
}
function workLoop(deadline) {    while(currentFiber && deadline.timeRemaining() > 0) {        currentFiber = getNextFiber(currentFiber);    }    if (!currentFiber && rootFiber) { // 如果没有任务了，则一次性提交整个根fiber，渲染出界面        commitRoot(); // 提交根Fiber节点开始渲染到界面    }    requestIdleCallback(workLoop); // 如果还有任务, 但是空闲时间不够了，则继续注册回调，等浏览器空闲之后再恢复执行}requestIdleCallback(workLoop);
function getNextFiber(fiber) {
}

2）、启动任务
目前我们注册了workLoop回调，其执行条件是currentFiber必须存在，所以要启动任务，必须初始化currentFiber，render()方法中将不再递归遍历虚拟DOM，创建真实DOM并加入到容器中，我们需要在render()中初始化一个rootFiber，并把rootFiber当作是currentFiber。

function render(vdom, container) {    rootFiber = { // 渲染的时候创建一个根fiber        type: "root",        props: {            children: [vdom] // children存储对应的虚拟DOM节点        },        dom: container, // rootFiber节点对应的dom为容器        parent: null, // 指向父Fiber        child: null, // 指向子Fiber        sibling: null // 指向兄弟Fiber    };    currentFiber = rootFiber; // 将根fiber节点标记为currentFiber，开始一个一个节点进行渲染}

Fiber节点和虚拟DOM节点非常相似，只是比虚拟DOM多了一些属性。

3）、实现获取下一个Fiber的逻辑
a. 首先看一下fiber对应的dom有没有创建出来，如果没有则创建出对应的真实DOM

b. 取出fiber的虚拟子节点并遍历，遍历的过程中开始层层构建fiber链表，将第一个子节点作为当前fiber的child，将第二个子节点作为第一个子节点的sibling，以此类推，将第三个子节点作为第二个子节点的sibling，最终构建出下一层Fiber链表。

c. 下一层Fiber链表构建完成后，就可以找到下一个Fiber节点，即下一个任务了，获取下一个任务的时候，首先会把当前Fiber的child指向的fiber作为下一个任务，如果当前Fiber没有child，那么就获取其sibling，如果当前Fiber也没有sibling了，那么就找到其parentFiber，再通过parentFiber找到其sibling作为下一个任务。

// 这里需要给Fiber节点创建出对应的真实DOM，所以将创建DOM的方法抽取出来function createDOM(vdom) {    let dom;    if (vdom.type === "TEXT") {        dom = document.createTextNode("");    } else {        dom = document.createElement(vdom.type);    }    updateProperties(dom, vdom.props);    return dom;}function getNextFiber(fiber) {    if (!fiber.dom) { // 刚开渲染的时候，只有根fiber才有对应的dom，即容器        fiber.dom = createDOM(fiber);    }    const vchildren = (fiber.props && fiber.props.children) || []; // 取出当前fiber的子节点，即子虚拟DOM    createFiberLinkedList(fiber, vchildren);    if (fiber.child) { // 如果当前fiber存在child则取出其child指向的Fiber节点作为下一个任务        return fiber.child;    }    // 当遍历到最底层的时候，就会出现没有child的情况，此时就要开始找其兄弟节点了    let currentFiber = fiber;    while(currentFiber) {        if (currentFiber.sibling) { // 如果存在兄弟节点            return currentFiber.sibling; // 返回其兄弟节点        }        // 当遍历到最后一个子节点的时候，会出现sibling兄弟节点不存在的情况        currentFiber = currentFiber.parent; // 找到当前节点的父节点    }}
function createFiberLinkedList(fiber, vchildren) {    let index = 0;    let prevSibling = null; // 兄弟节点的上一个节点    while(index < vchildren.length) { // 遍历子节点，进行层层构建        let vchild = vchildren[index];        let newFiber = { // 根据子节点构造出对应的Fiber节点            type: vchild.type, // 当前节点类型 h1            props: vchild.props, // 当前节点属性            parent: fiber, // 指向父节点            dom: null,            child: null        }        if (index === 0) { // 如果是第一个子节点，则作为当前fiber的子fiber            fiber.child = newFiber;        } else {            prevSibling.sibling = newFiber; // 将第二个以及之后的子节点作为上一个兄弟节点的兄弟节点        }        prevSibling = newFiber; // 将当前创建的fiber保存为其兄弟节点的上一个节点        index++;    }}

4）、提交整个根Fiber并渲染出界面
现在根Fiber已经构建完成，接下来就是将整个根Fiber进行提交，然后渲染出界面，提交的时候需要将整个根Fiber重置为null，避免多次提交。

提交的时候首先从根Fiber的child开始，找到其父Fiber对应的DOM，然后将子Fiber对应的DOM加入到父Fiber对应的DOM中，接着重复该过程递归将当前Fiber的child和sibling进行提交。

function commitRoot() {    commitWorker(rootFiber.child); // 将根fiber的子fiber传入    rootFiber = null;}function commitWorker(fiber) {    if (!fiber) {        return;    }    const parentDOM = fiber.parent.dom; // 拿到当前fiber的父fiber对应的dom    parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    commitWorker(fiber.child); // 递归将当前fiber的子fiber提交    commitWorker(fiber.sibling); // 递归将当前fiber的下一个兄弟fiber提交}

5、支持函数组件

函数组件的type比较特殊，是一个函数，无法像HTML标签一样，直接通过document.createElement()方法创建出对应的DOM元素，所以在getNextFiber()的时候，必须先判断是否是函数组件，如果是函数组件，那么不创建DOM，而是执行函数组件获取到其返回的虚拟节点作为函数组件对应Fiber的子节点。

function doFunctionComponent(fiber) {    const vchildren = [fiber.type(fiber.props)]; // 执行函数组件拿到对应的虚拟DOM作为函数组件的虚拟子节点    createFiberLinkedList(fiber, vchildren);}
function doNativeDOMComponent(fiber) {    if (!fiber.dom) { // 刚开渲染的时候，只有根fiber才有对应的dom，即容器        fiber.dom = createDOM(fiber);    }    const vchildren = (fiber.props && fiber.props.children) || []; // 子节点就是虚拟DOM    createFiberLinkedList(fiber, vchildren);}
function getNextFiber(fiber) {    const isFunctionComponent = typeof fiber.type === "function";    if (isFunctionComponent) { // 处理函数组件        doFunctionComponent(fiber);    } else { // 处理DOM        doNativeDOMComponent(fiber);    }    ......}

新增了函数组件对应的Fiber节点后，在提交的时候会存在一些问题:

a. 由于函数组件对应的Fiber没有对应的真实DOM，所以无法直接通过其父Fiber的DOM将其加入

b. 由于函数组件对应的Fiber没有对应的真实DOM，所以其子Fiber节点也无法通过其父Fiber(函数组件对应的Fiber)获取到DOM并加入子Fiber节点对应的DOM。

function commitWorker(fiber) {    ......    // const parentDOM = fiber.parent.dom; // 拿到当前fiber的父fiber对应的dom    let parentFiber = fiber.parent; // 获取到当前Fiber的父Fiber    while (!parentFiber.dom) { // 看看父Fiber有没有DOM，如果没有说明是函数组件对应的Fiber，需要继续向上获取其父Fiber节点，直到其父Fiber有DOM为止        parentFiber = parentFiber.parent;    }    const parentDOM = parentFiber.dom; // 获取到父Fiber对应的真实DOM    // parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    if (fiber.dom) { // 如果当前fiber存在dom则加入到父节点中, 函数组件没有对应dom        parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    }    ......}

useState可以让我们的函数组件拥有自己的状态。useState的实现非常简单，首先在创建函数组件对应Fiber的时候，会给其添加一个hooks数组，用于存储当前函数组件内创建的hook。

每当执行useState()函数的时候，内部会创建一个hook对象，该hook对象包含了当前的state和修改时传入的最新状态数组queue，同时返回一个setState()函数，然后将创建的hook放到函数组件对应Fiber的hooks数组内。

当setState(newState)函数被调用的时候，传入的最新状态就会被放到hook的queue数组中，同时更新rootFiber和currentFiber，以便让workLoop可以继续执行，此时整个组件将会被重新渲染，当函数组件重新渲染的时候，useState()也会重新执行，此时会通过上一次渲染时函数组件对应的Fiber拿到上一次的hook，继而从hook的queue中取出调用setState时候传入的最新状态数据，然后更新为当前hook的状态，从而使状态得到更新。

let functionComponentFiber; // 保存函数组件对应的Fiberlet hookIndex; // 可能一个组件中使用到多个hook，记录hook的索引let oldRootFiber; // rootFiber提交完后保存为旧的rootFiber即上一次渲染的rootFiberfunction doFunctionComponent(fiber) {    functionComponentFiber = fiber; // 保存函数组件对应的Fiber节点    hookIndex = 0; // 初始化hook索引为0    functionComponentFiber.hooks = []; // 并在函数组件对应的fiber上添加一个hooks数组，每次重新渲染都会重新初始化为空数组    ......}function useState(init) {    // 从上一次渲染完成的函数组件对应的fiber的hooks数组中根据索引获取到对应的hook    const oldHook = functionComponentFiber.base && functionComponentFiber.base.hooks && functionComponentFiber.base.hooks[hookIndex];    const hook = { // 创建一个新的hook，state从上次中获取        state: oldHook? oldHook.state: init,        queue: []    };    const newStates = oldHook ? oldHook.queue : []; // 从上次hook中获取最新的状态    newStates.forEach(newState => {        hook.state = newState; // 更新hook    });    const setState = (newState) => {        hook.queue.push(newState); // 将新的状态放到hook的queue数组中        rootFiber = {            dom: oldRootFiber.dom,            props: oldRootFiber.props,            base: oldRootFiber        }        currentFiber = rootFiber;    }    functionComponentFiber.hooks.push(hook); // 将当前hook保存到函数组件对应的fiber节点的hooks数组中    hookIndex++; // 可能会有多个状态    return [hook.state, setState];}

在useState()中需要获取上一次的hook，所以需要给Fiber节点增加一个base属性用于保存上一次的Fiber节点。

function createFiberLinkedList(fiber, vchildren) {    ......    let oldFiber = fiber.base && fiber.base.child; // 取出第一个子节点对应的oldFiber    ......    while(index < vchildren.length) { // 遍历子节点，进行层层构建        ......        let newFiber = { // 根据子节点构造出对应的Fiber节点            type: vchild.type, // 当前节点类型 h1            props: vchild.props, // 当前节点属性            parent: fiber, // 指向父节点            dom: null,            child: null,            base: oldFiber // 保存上一次的Fiber        }        // 如果比较的时候有多个子节点，需要更新oldFiber        if (oldFiber) {            oldFiber = oldFiber.sibling;        }        ......    }}

此时还有一个问题，就是重新渲染的时候，必须将容器DOM中上一次渲染的DOM清空，否则会重新创建一份DOM追加到容器DOM中。

function commitRoot() {    let rootDOM = rootFiber.dom; // 取出容器DOM    while(rootDOM.hasChildNodes()) {        rootDOM.removeChild(rootDOM.firstChild); // 清空容器DOM中的子节点    }    ......}

7、实现DOM-DIFF

DOM-DIFF主要就是比较两个Fiber节点的type是否一致，如果一致则进行复用上一次渲染的DOM节点，然后更新DOM的属性即可。

function createFiberLinkedList(fiber, vchildren) {    ......    while(index < vchildren.length) { // 遍历子节点，进行层层构建        let newFiber;        const sameType = oldFiber && vchild && oldFiber.type === vchild.type; // 比较新旧Fiber的type是否一致        if (sameType) { // 表示是更新            newFiber = {                type: oldFiber.type,                props: vchild.props, // 从最新的虚拟节点中获取最新的属性                dom: oldFiber.dom, // 使用上次创建的dom即可                parent: fiber,                child: null,                base: oldFiber,                effectTag: "UPDATE" // 标识为更新            }        }        if (!sameType && vchild) { // 如果类型不同且存在虚拟子节点则表示新增            newFiber = {                type: vchild.type, // 当前节点类型 如h1                props: vchild.props, // 当前节点属性                parent: fiber, // 指向父节点                dom: null,                child: null,                base: null,                effectTag: "ADD" // 标识为新增            }        }    }}

由于进行了DOM的复用，所以在提交DOM的时候，就不用先将容器DOM的所有子节点清空了，如:

function commitRoot() {    // 不需要先清空容器DOM的所有子节点了    // let rootDOM = rootFiber.dom;    // while(rootDOM.hasChildNodes()) {    //     rootDOM.removeChild(rootDOM.firstChild);    // }    ......}function commitWorker(fiber) {    if (fiber.effectTag === "ADD" && fiber.dom != null) { // 新增        parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    } else if (fiber.effectTag === "UPDATE" && fiber.dom !== null) { // 更新        updateProperties(fiber.dom, fiber.base.props, fiber.props);    }}

复用之前的DOM时，需要更新DOM上的属性，所以需要修改updateProperties()方法，传入新的和旧的属性，如:

function updateProperties(dom, oldProps, newProps) {    for (let key in oldProps) {        if (!newProps[key]) {            dom.removeAttribute(key);        }    }    for (let key in newProps) { // 遍历属性并更新到DOM节点上        if (key !== "children") {            if (key.slice(0, 2) === "on") {                dom.addEventListener(key.slice(2).toLowerCase(), newProps[key], false);            } else {                if (oldProps[key] !== newProps[key]) { // 如果属性值发生变化则进行更新                    dom[key] = newProps[key];                }            }        }    }}

8、完整代码如下

react.js代码如下:

let currentFiber; // 保存当前工作的Fiber节点let rootFiber; // 根Fiber节点，render()方法内会进行初始化let functionComponentFiber; // 保存函数组件对应的Fiberlet hookIndex; // 可能一个组件中使用到多个hook，记录hook的索引let oldRootFiber; // rootFiber提交完后保存为旧的rootFiber即上一次渲染的rootFiberfunction createElement(type, config, ...children) { // Babel解析后传递的config肯定是一个对象，不管JSX中有没有设置属性    delete config.__source; // ——souce属性和__self属性太复杂直接移除    delete config.__self;    const props = {...config};    props.children = children.map((child) => { // 遍历子节点，主要处理一些纯文本        return typeof child === "object" ? child : createTextElement(child)    });    return { // 构造一个虚拟DOM节点        type,        props    }}
function createTextElement(text) { // 专门处理纯文本，将纯文本转化成一个React虚拟DOM节点    return {        type: "TEXT",        props: {            nodeValue: text,            children: []        }    }}
function render(vdom, container) {    // let dom;    // let props = vdom.props;    // if (vdom.type === "TEXT") { // 是文本节点    //     dom = document.createTextNode("");    // } else {    //     dom = document.createElement(vdom.type);    // }    // updateProperties(dom, props); // 更新DOM属性    // vdom.props.children.forEach((child) => { // 遍历子节点，递归调用render()方法将子节点渲染出来    //     render(child, dom);    // });    // container.appendChild(dom); // 整个虚拟DOM渲染完成后将其加入到容器中进行挂载到页面上    rootFiber = { // 渲染的时候创建一个根fiber        type: "root",        props: {            children: [vdom] // children存储对应的虚拟DOM节点        },        dom: container, // rootFiber节点对应的dom为容器        parent: null, // 指向父Fiber        child: null, // 指向子Fiber        sibling: null // 指向兄弟Fiber    };    currentFiber = rootFiber; // 将根fiber节点标记为currentFiber，开始一个一个节点进行渲染}
function createDOM(vdom) {    let dom;    if (vdom.type === "TEXT") {        dom = document.createTextNode("");    } else {        dom = document.createElement(vdom.type);    }    updateProperties(dom, {}, vdom.props);    return dom;}
function updateProperties(dom, oldProps, newProps) {    for (let key in oldProps) {        if (!newProps[key]) {            dom.removeAttribute(key);        }    }    for (let key in newProps) { // 遍历属性并更新到DOM节点上        if (key !== "children") {            if (key.slice(0, 2) === "on") {                dom.addEventListener(key.slice(2).toLowerCase(), newProps[key], false);            } else {                if (oldProps[key] !== newProps[key]) { // 如果属性值发生变化则进行更新                    dom[key] = newProps[key];                }            }        }    }}
function commitRoot() {    // 不需要先清空容器DOM的所有子节点了    // let rootDOM = rootFiber.dom;    // while(rootDOM.hasChildNodes()) {    //     rootDOM.removeChild(rootDOM.firstChild);    // }    commitWorker(rootFiber.child); // 将根fiber的子fiber传入    oldRootFiber = rootFiber; // 提交后将最终的rootFiber保存为oldRootFiber    rootFiber = null;}
function commitWorker(fiber) {    if (!fiber) {        return;    }    let parentFiber = fiber.parent;    while (!parentFiber.dom) {        parentFiber = parentFiber.parent;    }    const parentDOM = parentFiber.dom;    // const parentDOM = fiber.parent.dom; // 拿到当前fiber的父fiber对应的dom    // if (fiber.dom) { // 如果当前fiber存在dom则加入到父节点中, 函数组件没有对应dom    //     parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    // }    if (fiber.effectTag === "ADD" && fiber.dom != null) {        parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    } else if (fiber.effectTag === "UPDATE" && fiber.dom !== null) {        updateProperties(fiber.dom, fiber.base.props, fiber.props);    }    // parentDOM.appendChild(fiber.dom); // 将当前fiber对应的dom加入父dom中    commitWorker(fiber.child); // 递归将当前fiber的子fiber提交    commitWorker(fiber.sibling); // 递归将当前fiber的下一个兄弟fiber提交}
function workLoop(deadline) {    while(currentFiber && deadline.timeRemaining() > 0) {        currentFiber = getNextFiber(currentFiber);    }    if (!currentFiber && rootFiber) { // 如果没有任务了，则一次性提交整个根fiber，渲染出界面        commitRoot(); // 提交根Fiber节点开始渲染到界面    }    requestIdleCallback(workLoop); // 如果还有任务, 但是空闲时间不够了，则继续注册回调，等浏览器空闲之后再恢复执行}requestIdleCallback(workLoop);
function doNativeDOMComponent(fiber) {    if (!fiber.dom) { // 刚开渲染的时候，只有根fiber才有对应的dom，即容器        fiber.dom = createDOM(fiber);    }    const vchildren = (fiber.props && fiber.props.children) || []; // 子节点就是虚拟DOM    createFiberLinkedList(fiber, vchildren);}
function doFunctionComponent(fiber) {    functionComponentFiber = fiber;    hookIndex = 0;    functionComponentFiber.hooks = []; // 并在函数组件对应的fiber上添加一个hooks数组，每次重新渲染都会重新初始化为空数组    const vchildren = [fiber.type(fiber.props)]; // 执行函数组件拿到对应的虚拟DOM作为函数组件的虚拟子节点    createFiberLinkedList(fiber, vchildren);}
function getNextFiber(fiber) {    const isFunctionComponent = typeof fiber.type === "function";    if (isFunctionComponent) {        doFunctionComponent(fiber);    } else {        doNativeDOMComponent(fiber);    }
    if (fiber.child) { // 如果当前fiber存在child则取出其child指向的Fiber节点作为下一个任务        return fiber.child;    }    // 当遍历到最底层的时候，就会出现没有child的情况，此时就要开始找其兄弟节点了    let currentFiber = fiber;    while(currentFiber) {        if (currentFiber.sibling) { // 如果存在兄弟节点            return currentFiber.sibling; // 返回其兄弟节点        }        // 当遍历到最后一个子节点的时候，会出现sibling兄弟节点不存在的情况        currentFiber = currentFiber.parent; // 找到当前节点的父节点    }}
function createFiberLinkedList(fiber, vchildren) {    let index = 0;    let oldFiber = fiber.base && fiber.base.child; // 取出第一个子节点对应的oldFiber    let prevSibling = null; // 兄弟节点的上一个节点    while(index < vchildren.length) { // 遍历子节点，进行层层构建        let vchild = vchildren[index];        let newFiber;        const sameType = oldFiber && vchild && oldFiber.type === vchild.type; // 比较新旧Fiber的type是否一致        if (sameType) { // 表示是更新            newFiber = {                type: oldFiber.type,                props: vchild.props, // 从最新的虚拟节点中获取最新的属性                dom: oldFiber.dom, // 使用上次创建的dom即可                parent: fiber,                child: null,                base: oldFiber,                effectTag: "UPDATE" // 标识为更新            }        }        if (!sameType && vchild) { // 如果类型不同且存在虚拟子节点则表示新增            newFiber = {                type: vchild.type, // 当前节点类型 如h1                props: vchild.props, // 当前节点属性                parent: fiber, // 指向父节点                dom: null,                child: null,                base: null,                effectTag: "ADD" // 标识为新增            }        }
        // 如果比较的时候有多个子节点，需要更新oldFiber        if (oldFiber) {            oldFiber = oldFiber.sibling;        }        if (index === 0) { // 如果是第一个子节点，则作为当前fiber的子fiber            fiber.child = newFiber;        } else {            prevSibling.sibling = newFiber; // 将第二个以及之后的子节点作为上一个兄弟节点的兄弟节点        }        prevSibling = newFiber; // 将当前创建的fiber保存为其兄弟节点的上一个节点        index++;    }}
function useState(init) {    // 从上一次渲染完成的函数组件对应的fiber的hooks数组中根据索引获取到对应的hook    const oldHook = functionComponentFiber.base && functionComponentFiber.base.hooks && functionComponentFiber.base.hooks[hookIndex];    const hook = { // 创建一个新的hook，state从上次中获取        state: oldHook? oldHook.state: init,        queue: []    };    const newStates = oldHook ? oldHook.queue : []; // 从上次hook中获取最新的状态    newStates.forEach(newState => {        hook.state = newState; // 更新hook    });    const setState = (newState) => {        hook.queue.push(newState); // 将新的状态放到hook的queue数组中        rootFiber = {            dom: oldRootFiber.dom,            props: oldRootFiber.props,            base: oldRootFiber        }        currentFiber = rootFiber;    }    functionComponentFiber.hooks.push(hook); // 将当前hook保存到函数组件对应的fiber节点的hooks数组中    hookIndex++; // 可能会有多个状态    return [hook.state, setState];}export default {    createElement,    render,    useState}

应用代码如下:

import React from "./react/index";let ReactDOM = React;function App(props) {    const [minAge, setMinAge] = React.useState(1);    const [maxAge, setMaxAge] = React.useState(100);    return (        
            
minAge: {minAge}
                        
maxAge: {maxAge}
                    
    );}ReactDOM.render(, document.getElementById("root"));
感谢阅读。
本文完~
浏览 38
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
Fiber的深度理解
前端精髓
0
React Fiber架构浅析
全栈前端精选
0
JIT Compilation：理解与实现
Linux内核那些事
0
React Fiber架构浅析
前端Sharing
0
React Fiber架构浅析
前端迷
0
红黑树的理解与 Java 实现
肉眼品世界
0
理解 NUMA 架构
k8s技术圈
0
秒杀系统的技术架构设计与实现
前端Q
0
红黑树的理解与 Java 实现
编程帮
0
MySQL 架构，简单
AlwaysBeta
0
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报