React Fiber 漸進(jìn)式遍歷詳解

GraphQuery 發(fā)布于2019-08-26 13:50 / 1164人閱讀

摘要：今天將手寫一個，詳細(xì)講解遍歷鏈的實現(xiàn)方式?？梢钥吹窖h(huán)的結(jié)束條件是當(dāng)前處理的節(jié)點等于根節(jié)點。下面再來看看怎么結(jié)合，實現(xiàn)漸進(jìn)式遍歷。

歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：

一、前言

之前寫的一篇文章，React Fiber 原理介紹，介紹了 React Fiber 的實現(xiàn)原理，其中的關(guān)鍵是使用Fiber鏈的數(shù)據(jù)結(jié)構(gòu)，將遞歸的Stack Reconciler改寫為循環(huán)的Fiber Reconciler。今天將手寫一個 demo，詳細(xì)講解遍歷Fiber鏈的實現(xiàn)方式。

二、Stack Reconciler

假設(shè)有以下組件樹：

對應(yīng)的 JS 代碼如下：

const a1 = {name: "a1"};
const b1 = {name: "b1"};
const b2 = {name: "b2"};
const b3 = {name: "b3"};
const c1 = {name: "c1"};
const c2 = {name: "c2"};
const d1 = {name: "d1"};
const d2 = {name: "d2"};

a1.render = () => [b1, b2, b3];
b1.render = () => [];
b2.render = () => [c1];
b3.render = () => [c2];
c1.render = () => [d1, d2];
c2.render = () => [];
d1.render = () => [];
d2.render = () => [];

使用Stack Reconciler遞歸的方式來遍歷組件樹，大概是這個樣子：

function doWork(o) {
    console.log(o.name);
}

function walk(instance) {
    doWork(instance);
    
    const children = instance.render();
    children.forEach(walk);
}

walk(a1);

// 輸出結(jié)果：a1, b1, b2, c1, d1, d2, b3, c2

二、Fiber Reconciler

下面我們用 Fiber 的數(shù)據(jù)結(jié)構(gòu)來改寫遍歷過程。首先定義數(shù)據(jù)結(jié)構(gòu)，然后在遍歷的過程中通過link方法創(chuàng)建節(jié)點間的關(guān)系：

// 定義 Fiber 數(shù)據(jù)結(jié)構(gòu)
class Node {
    constructor(instance) {
        this.instance = instance;
        this.child = null;
        this.sibling = null;
        this.return = null;
    }
}

// 創(chuàng)建關(guān)系鏈
function link(parent, children) {
    if (children === null) children = [];

    // child 指向第一個子元素
    parent.child = children.reduceRight((previous, current) => {
        const node = new Node(current);
        node.return = parent;
        // sibling 指向前面處理的元素
        node.sibling = previous;
        return node;
    }, null);

    return parent.child;
}

遍歷完成后會得出如下的關(guān)系鏈：

下面來詳細(xì)看下遍歷的過程。還是沿用之前的walk和doWork方法名：

function doWork(node) {
    console.log(node.instance.name);
    
    // 創(chuàng)建關(guān)系鏈
    const children = node.instance.render();
    return link(node, children);
}

function walk() {
    while (true) {
        let child = doWork(node);

        if (child) {
            node = child;
            continue;
        }

        if (node === root) {
            return;
        }

        while (!node.sibling) {
            if (!node.return || node.return === root) {
                return;
            }

            node = node.return;
        }

        node = node.sibling;
    }
}

const hostNode = new Node(a1);

const root = hostNode;
let node = root;

walk();

// 輸出結(jié)果：a1, b1, b2, c1, d1, d2, b3, c2

上面就是遞歸改循環(huán)的代碼了?？梢钥吹窖h(huán)的結(jié)束條件是當(dāng)前處理的節(jié)點等于根節(jié)點。在循環(huán)開始的時候，以深度優(yōu)先一層一層往下遞進(jìn)。當(dāng)沒有子節(jié)點和兄弟節(jié)點的時候，當(dāng)前節(jié)點會往上層節(jié)點回溯，直至根節(jié)點為止。

下面再來看看怎么結(jié)合requestIdleCallback API，實現(xiàn)漸進(jìn)式遍歷。由于完成這個遍歷所需時間實在太短，因此每處理 3 個節(jié)點，我們sleep 1 秒，從而達(dá)到退出當(dāng)前requestIdleCallback的目的，然后再創(chuàng)建一個新的回調(diào)任務(wù)：

function sleep(n) {
    const start = +new Date();
    while(true) if(+new Date() - start > n) break;
}

function walk(deadline) {
    let i = 1;

    while (deadline.timeRemaining() > 0 || deadline.didTimeout) {
        console.log(deadline.timeRemaining(), deadline.didTimeout);

        let child = doWork(node);

        if (i > 2) {
            sleep(1000);
        }
        i++;

        if (child) {
            node = child;
            continue;
        }

        if (node === root) {
            console.log("================ Task End ===============");
            return;
        }

        while (!node.sibling) {
            if (!node.return || node.return === root) {
                console.log("================ Task End ===============");
                return;
            }

            node = node.return;
        }

        node = node.sibling;
    }

    console.log("================ Task End ===============");

    requestIdleCallback(walk);
}

requestIdleCallback(walk);

// 輸出結(jié)果：
15.845 false
a1
15.14 false
b1
14.770000000000001 false
b2
================ Task End ===============
15.290000000000001 false
c1
14.825000000000001 false
d1
14.485000000000001 false
d2
================ Task End ===============
14.96 false
b3
14.475000000000001 false
c2
================ Task End ===============

三、總結(jié)

本文通過一個 demo，講解了如何利用React Fiber的數(shù)據(jù)結(jié)構(gòu)，遞歸改循環(huán)，實現(xiàn)組件樹的漸進(jìn)式遍歷。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/109642.html

發(fā)表評論

登陸后可評論

0條評論

GraphQuery

男|高級講師

我要關(guān)注我要私信

TA的文章

如何在anaconda中安裝tensorflow

閱讀 2860·2023-04-25 18:58
#yyds干貨盤點#Apache的虛擬主機功能以及功能配置（一）

閱讀 988·2021-11-25 09:43
RackNerd雙十一促銷,洛杉磯VPS年付12美元起

閱讀 1224·2021-10-25 09:46
SecretFolder – 100%免費文件夾加密和隱藏實用桌面軟件

閱讀 3509·2021-09-09 11:40
UCloud快杰型云主機新人福利優(yōu)惠（可選香港/上海/北京等）

閱讀 1713·2021-08-05 09:59
神奇的BFC

閱讀 880·2019-08-29 15:07
用本地運行的demo快速入門跨域

閱讀 968·2019-08-29 12:48
《CSS揭秘》：菱形圖片

閱讀 710·2019-08-29 11:19

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React Fiber 漸進(jìn)式遍歷詳解

相關(guān)文章

**【譯】React及React Fiber基本的設(shè)計理念**

React Fiber 原理介紹

React16性能改善的原理（二）

**Deep In React之淺談 React Fiber 架構(gòu)(一)**

**「React 16」為 Luy 實現(xiàn) React Fiber 架構(gòu)**

發(fā)表評論

0條評論

GraphQuery

男|高級講師

TA的文章

如何在anaconda中安裝tensorflow

#yyds干貨盤點#Apache的虛擬主機功能以及功能配置（一）

RackNerd雙十一促銷,洛杉磯VPS年付12美元起

SecretFolder – 100%免費文件夾加密和隱藏實用桌面軟件

UCloud快杰型云主機新人福利優(yōu)惠（可選香港/上海/北京等）

神奇的BFC

用本地運行的demo快速入門跨域

《CSS揭秘》：菱形圖片

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

React Fiber 漸進(jìn)式遍歷詳解

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！