90行JS程式碼構建屬於你的React

劉小夕發表於2019-11-14

譯者注：

本文中的實現藉助了 snabbdom ，因此如果你的關注點是虛擬DOM的實現或是將虛擬DOM渲染到瀏覽器的底層實現，本篇文章中並不會涉及到。

本篇翻譯已徵得原作者同意：

更多文章可戳: https://github.com/YvetteLau/...

我無法理解我不能創造的東西 —— 費曼

當我學習 React 的時候，我覺得它所做的一切都是魔術，然後我就開始思考這種魔術究竟是什麼。我感到非常驚訝，當我發現 React 所做的一切非常簡單，甚至如果我們不是下一家大型初創公司增加籌碼，僅需要很少的JS程式碼就可以構建它。這也是促使我寫這篇文章的動力，希望你讀完這篇文章也有相同的感覺。

我們將構建什麼功能？

JSX
函式元件
類元件
生命週期鉤子函式

我們不會構建什麼？

虛擬DOM

再次為了簡單起見，我們不會在本文中實現我們自己的虛擬DOM，我們將使用 snabbdom ，有趣的是，Vue.js 虛擬DOM借鑑了它，你可以在這裡讀更多關於 snabbdom 的內容: https://github.com/snabbdom/s...

React Hooks

有些人可能對此感動失望，但是，一口吃不成一個胖子，我們需要一步一步來，因此讓我們首先構建基本的東西，然後再在此基礎上加以補充。我計劃後續文章中在我們此次構建的內容之上，編寫我們自己的 React Hooks 以及虛擬DOM，

可除錯性

這是增加任何庫或框架的複雜度的關鍵部分之一，由於我們只是出於娛樂目的而做，因此我們可以放心地忽略 React 提供的可除錯性功能，例如 dev tools 和分析器。

效能和相容性

我們不會過於關注我們的庫的效能，我們只想構建能正常執行的庫。讓我們也不要費力地確保它可以在市場上的所有瀏覽器上使用，只有能夠在某些現代瀏覽器上可以使用，那就已經很好了。

讓我們開始動手

在開始之前，我們需要一個支援ES6，自動熱更新的腳手架。我已經建立了一個非常基礎的 webpack 腳手架，你可以進行克隆和設定: https://github.com/ameertheha...

giphy (1).gif

JSX

JSX 是一個開放標準，不僅限於 React，我們可以在沒有 React 的情況下使用它，它比你想象得還有容易。想要了解如何讓我們的庫支援 JSX ，我們首先需要看看在我們使用 JSX 時背後究竟發生了什麼。

const App = (
    <div>
        <h1 className="primary">QndReact is Quick and dirty react</h1>
        <p>It is about building your own React in 90 lines of JavsScript</p>
    </div>
);

// 上面的 jsx 被轉換成下面這樣：
/**
 * React.createElement(type, attributes, children)
 */
var App = React.createElement(
    "div",
    null,
    React.createElement(
        "h1",
        {
            className: "primary"
        },
        "QndReact is Quick and dirty react"
    ),
    React.createElement(
        "p",
        null,
        "It is about building your own React in 90 lines of JavsScript"
    )
);

正如你看到的，每個 JSX 元素都通過 @babel/plugin-transform-react-jsx 外掛轉換為了 React.createElement(...) 函式呼叫的形式，你可以在這裡使用 JSX 進行更多的轉換

為了使上述轉換執行正常，在編寫 JSX 時，你需要引入 React，你就是為什麼當你不引入 React 時，編寫 JSX 會出現錯誤的原因。 @babel/plugin-transform-react-jsx 外掛已經新增在了我們的專案依賴中，下面我們先安裝一下依賴

npm install

把專案的配置增加到 .babelrc 檔案中:

{
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            {
                "pragma": "QndReact.createElement", // default pragma is React.createElement
                "throwIfNamespace": false // defaults to true
            }
        ]
    ]
}

此後，只要 Babel 看到 JSX ，它就會呼叫 QntReact.createElement(...)，但是我們還未定義此函式，現在我們將其寫到 src/qnd-react.js 中。

const createElement = (type, props = {}, ...children) => {
    console.log(type, props, children);
};

// 像 React.createElement 一樣匯出
const QndReact = {
    createElement
};

export default QndReact;

我們在控制檯列印出了傳遞給我們的 type 、 props、 children。為了測試我們的轉換是否正常，我們可以在 src/index.js 中編寫一些 JSX 。

// QndReact 需要被引入
import QndReact from "./qnd-react";

const App = (
    <div>
        <h1 className="primary">
            QndReact is Quick and dirty react
        </h1>
        <p>It is about building your own React in 90 lines of JavsScript</p>
    </div>
);

啟動專案: npm start，在瀏覽器輸入localhost:3000，現在你的控制檯看起來應該與下圖類似:

根據以上資訊，我們可以使用 snabbdom 建立我們內部的 虛擬DOM節點 ，然後我們才能將其用於我們的協調(reconciliation) 過程，可以使用如下的命令安裝 snabbdom:

npm install snabbdom

當 QndReact.createElement(...) 被呼叫時嗎，建立和返回 虛擬DOM節點。

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    return h(type, { props }, children);
};

const QndReact = {
    createElement
};

export default QndReact;

很好，現在我們可以解析 JSX 並建立自己的虛擬DOM節點，但是仍然無法在瀏覽器中呈現出來。為此，我們在 src/qnd-react-dom.js 新增一個 render 方法。

//src/qnd-react-dom.js

//React.render(<App />, document.getElementById('root'));
const render = (el, rootElement) => {
    //將el渲染到rootElement的邏輯
}

const QndReactDom = {
    render
}

與其我們自己去處理將元素放到 DOM 上的繁重工作，不如讓 snabbdom 去處理。為此我們可以引入模組去初始化 snabbdom。snabbdom 中的模組可以看做是外掛，可以支援 snabbdom 做更多的事。

//src/qnd-react-dom.js
import * as snabbdom from 'snabbdom';
import propsModule from 'snabbdom/modules/props';
const reconcile = snabbdom.init([propsModule]);

const render = (el, rootDomElement) => {
    //將el渲染到rootElement
    reconcile(rootDomElement, el);
}

const QndReactDom = {
    render
}
export default QndReactDom;

我們使用這個新的 render 函式去 src/index 中去做一些魔法。

//src/index.js
import QndReact from "./qnd-react";
import QndReactDom from './qnd-react-dom';
const App = (
    <div>
        <h1 className="primary">
            QndReact is Quick and dirty react
        </h1>
        <p>It is about building your own React in 90 lines of JavsScript</p>
    </div>
);

QndReactDom.render(App, document.getElementById('root'));

瞧，我們的JSX已經可以渲染到螢幕上了。

等下，這個有一個小問題，當我們兩次呼叫 render 時，我們會在控制檯看到一些奇怪的錯誤(譯者注: 可以在 index.js 中多次呼叫 render，檢視控制檯錯誤)，背後的原因是我們只有在第一次渲染時，可以在真實的DOM節點上呼叫 reconcile 方法，然後，我們應該在之前返回的虛擬DOM節點上呼叫。

//src/qnd-react-dom.js
import * as snabbdom from 'snabbdom';
import propsModule from 'snabbdom/modules/props';

const reconcile = snabbdom.init([propsModule]);

let rootVNode;
//QndReactDom.render(App, document.getElementById('root'))
const render = (el, rootDomElement) => {
    if(rootVNode == null) {
        //第一次呼叫 render 時
        rootVNode = rootDomElement;
    }
    rootVNode = reconcile(rootVNode, el);
}

const QndReactDom = {
    render
}
export default QndReactDom;

很開心，我們的應用程式中有一個能正常工作的 JSX 渲染，現在讓我們開始渲染一個函式元件，而不僅僅是一些普通的 HTML。

讓我們向 src/index.js 新增一個 Greeting 函式元件，如下所示：

//src/index.js
import QndReact from "./qnd-react";
import QndReactDom from './qnd-react-dom';

const Greeting = ({ name }) => <p>Welcome {name}!</p>;

const App = (
    <div>
        <h1 className="primary">
            QndReact is Quick and dirty react
        </h1>
        <p>It is about building your own React in 90 lines of JavsScript</p>
        <Greeting name={"Ameer Jhan"} />
    </div>
);

QndReactDom.render(App, document.getElementById('root'));

此時，在控制檯會出現以下錯誤:

我們可以在 QndReact.createElement(...) 方法中列印出資料看一下原因。

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    console.log(type, props, children);
    return h(type, { props }, children);
};
...

如果可以看到，函式元件傳遞過來的 type 是一個JS函式。如果我們呼叫這個函式，就能獲得元件希望渲染的 HTML 結果。

我們根據 type 引數的型別，如果是函式型別，我們就呼叫這個函式，並將 props 作為引數傳給它，如果不是函式型別，我們就當作普通的 HTML 元素處理。

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};

const QndReact = {
    createElement
};

export default QndReact;

歡呼！我們的函式元件已經可以正常工作了。

我們已經完成了很多，讓我們深吸一口氣，喝杯咖啡，因為我們已經差不多實現了 React，不過我們還需要攻克類元件。

我們首先在 src/qnd-react.js 中建立 Component 基類：

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};


class Component {
    constructor() { }

    componentDidMount() { }

    setState(partialState) { }

    render() { }
}


const QndReact = {
    createElement,
    Component
};

export default QndReact;

現在我們在 src/counter.js 中編寫我們的第一個 Counter 類元件：

//src/counter.js
import QndReact from './qnd-react';

export default class Counter extends QndReact.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        }
    }

    componentDidMount() {
        console.log('Component mounted');
    }

    render() {
        return <p>Count: {this.state.count}</p>
    }
}

是的，我知道我們尚未在計數器中實現任何邏輯，但是別擔心，一旦我們的狀態管理系統執行正常，我們就會新增這些內容。現在，讓我們嘗試在 src/index.js 中渲染它。

//src/index.js
import QndReact from "./qnd-react";
import QndReactDom from './qnd-react-dom';
import Counter from "./counter";

const Greeting = ({ name }) => <p>Welcome {name}!</p>;

const App = (
    <div>
        <h1 className="primary">
            QndReact is Quick and dirty react
        </h1>
        <p>It is about building your own React in 90 lines of JavsScript</p>
        <Greeting name={"Ameer Jhan"} />
        <Counter />
    </div>
);

QndReactDom.render(App, document.getElementById('root'));

和料想中的一樣，又又又報錯了。

上面的錯誤看起來是不是很熟悉，當你嘗試使用類元件而不整合自 React.Component 時，可能遇到過以上錯誤。要知道為什麼會這樣，我們可以在 React.createElement(...) 中新增一個 console.log，如下所示：

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    console.log(typeof (type), type);
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};

我們來看看控制檯列印了什麼內容。

你可以看出 Counter 的 type 型別也是函式，這是因為 Babel 會將 ES6 類轉換為普通的 JS 函式，那麼我們該如何類元件的情況呢。其實，我們可以在我們的 Component 基類中新增一個靜態屬性，這樣我們利用該屬性去檢查 type 引數是否是一個類。React 中也是相同的處理邏輯，你可以閱讀 Dan的部落格

//src/qnt-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    console.log(typeof (type), type);
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};


class Component {
    constructor() { }

    componentDidMount() { }

    setState(partialState) { }

    render() { }
}
//給 Component 元件新增靜態屬性來區分是函式還是類 
Component.prototype.isQndReactClassComponent = true;

const QndReact = {
    createElement,
    Component
};

export default QndReact;

現在，我們在 QndReact.createElement(...) 中增加一些程式碼來處理類元件。

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    console.log(type.prototype);
    /**
     * 如果是類元件
     * 1.建立一個例項
     * 2.呼叫例項的 render 方法
     */
    if (type.prototype && type.prototype.isQndReactClassComponent) {
        const componentInstance = new type(props);

        return componentInstance.render();
    }
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};


class Component {
    constructor() { }

    componentDidMount() { }

    setState(partialState) { }

    render() { }
}
//給 Component 元件新增靜態屬性來區分是函式還是類 
Component.prototype.isQndReactClassComponent = true;

const QndReact = {
    createElement,
    Component
};

export default QndReact;

現在，我們的類元件已經能夠渲染到瀏覽器上了：

我們向類元件中增加 state，在此之前，我們需要知道，每次呼叫 this.setState({}) 時，如何更新 DOM 的責任是 react-dom 包，而不是 React 的責任。這是為了使 React 的核心部分，例如Component 類與平臺分離，從而提升程式碼的可重用性。即在 ReactNative 中，你也可以使用同樣的 Component 類，react-native 負責如何更新UI。你可能會問自己：當呼叫 this.setState(...) 時，React 如何知道該怎麼做，答案就是 react-dom 通過在 React 上設定了一個 __updater 屬性與 React 進行通訊。Dan 對此也有出色的文章，你可以點選閱讀。現在讓我們在 QndReactDom 中為 QndReact 新增 __updater 屬性。

//src/qnd-react-dom.js
import QndReact from './qnd-react';
import * as snabbdom from 'snabbdom';
import propsModule from 'snabbdom/modules/props';

...

//QndReactDom 告訴 QndReact 如何更新 DOM
QndReact.__updater = () => {
    //當呼叫 this.setState 的時候更新 DOM 邏輯
}

無論何時我們呼叫 this.setState({...})，我們都需要比較元件的 oldVNode 和在元件上呼叫了 render 方法之後生成的 newVNode。為了進行比較，我們在類元件上新增 __vNode 屬性，以維護該元件當前的 VNode 例項。

//src/qnd-react.js
...
const createElement = (type, props = {}, ...children) => {
    /**
     * 如果是類元件
     * 1.建立一個例項
     * 2.呼叫例項的 render 方法
     */
    if (type.prototype && type.prototype.isQndReactClassComponent) {
        const componentInstance = new type(props);
        componentInstance.__vNode = componentInstance.render();
        return componentInstance.__vNode;
    }
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};
...

現在我們來在 Component 的基類中實現 setState 方法。

//src/qnd-react.js
...
class Component {
    constructor() { }

    componentDidMount() { }

    setState(partialState) { 
        this.state = {
            ...this.state,
            ...partialState
        }
        //呼叫 QndReactDom 提供的 __updater 方法
        QndReact.__updater(this);
    }

    render() { }
}
...

處理 QndReactDom 中的 __updater 方法。

//src/qnd-react-dom.js
...
QndReact.__updater = (componentInstance) => {
    //當呼叫 this.setState 的時候更新 DOM 邏輯
    //獲取在 __vNode 上儲存的 oldVNode
    const oldVNode = componentInstance.__vNode;
    //獲取 newVNode
    const newVNode = componentInstance.render();
    //更新 __vNode
    componentInstance.__vNode = reconcile(oldVNode, newVNode);
}
...
export default QndReactDom;

OK，我們在 Counter 元件中增加 state 來檢驗我們的 setState 實現是否生效。

//src/counter.js
import QndReact from './qnd-react';

export default class Counter extends QndReact.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        }

        // update the count every second
        setInterval(() => {
            this.setState({
                count: this.state.count + 1
            })
        }, 1000);
    }

    componentDidMount() {
        console.log('Component mounted');
    }

    render() {
        return <p>Count: {this.state.count}</p>
    }
}

太棒啦，現在 Counter 元件執行情況與我們預期完全一致。

我們繼續新增 componentDidMount 的生命週期鉤子函式。 Snabbdom 提供了一些鉤子函式，通過他們，我們可以知道真實DOM上面是否有新增，刪除或是更新了虛擬DOM節點，你可以在此處瞭解更多資訊。

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    /**
     * 如果是類元件
     * 1.建立一個例項
     * 2.呼叫例項的 render 方法
     */
    if (type.prototype && type.prototype.isQndReactClassComponent) {
        const componentInstance = new type(props);
        componentInstance.__vNode = componentInstance.render();
        return componentInstance.__vNode;

        //增加鉤子函式(當虛擬DOM被新增到真實DOM節點上時)
        componentInstance.__vNode.data.hook = {
            create: () => {
                componentInstance.componentDidMount()
            }
        }
    }
    //如果是函式元件，那麼呼叫它，並返回執行結果
    if (typeof (type) == 'function') {
        return type(props);
    }
    return h(type, { props }, children);
};

...

export default QndReact;

至此，我們已經在類元件上支援了 componentDidMount 生命週期鉤子函式。

結束之前，我們再新增下事件繫結的支援。為此，我們可以在 Counter 元件中增加一個按鈕，點選的時候，計數器的數字增加。請注意，我們遵循的是基於常規的JS事件命名約定，而非基於 React，即雙擊事件使用 onDblClick，而非 onDoubleClick。

import QndReact from './qnd-react';

export default class Counter extends QndReact.Component {
    constructor(props) {
        super(props);

        this.state = {
            count: 0
        }
    }

    componentDidMount() {
        console.log('Component mounted');
    }

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={() => this.setState({
                    count: this.state.count + 1
                })}>Increment</button>
            </div>
        )
    }
}

上面的元件不會正常工作，因為我們沒有告訴我們的 VDom 如何去處理它。首先，我們給 Snabdom 增加事件監聽模組。

//src/qnd-react-dom.js
import QndReact from './qnd-react';
import * as snabbdom from 'snabbdom';
import propsModule from 'snabbdom/modules/props';
import eventlistenersModule from 'snabbdom/modules/eventlisteners';

const reconcile = snabbdom.init([propsModule, eventlistenersModule]);

...

Snabdom 希望將文字屬性和事件屬性作為兩個單獨的物件，我們我們需要這樣做：

//src/qnd-react.js
import { h } from 'snabbdom';

const createElement = (type, props = {}, ...children) => {
    ...

    let dataProps = {};
    let eventProps = {};

    for (let propKey in props) {
        // event 屬性總是以 `on` 開頭
        if (propKey.startsWith('on')) {
            const event = propKey.substring(2).toLowerCase();
            eventProps[event] = props[propKey];
        } else {
            dataProps[propKey] = props[propKey];
        }
    }
    return h(type, { props: dataProps, on: eventProps }, children);
};

...

現在當我們點選 Counter 元件的按鈕的時候，計數器加1。

太棒了，我們終於完成了一個React的簡陋的實現。但是，我們還不能呈現列表，我想把它作為有趣的小任務交給您。我建議您嘗試在 src/index.js 中呈現一個列表，然後除錯 QndReact.createElement(...) 方法找出問題所在。

感謝您一直陪伴我，希望您喜歡構建自己的 React ，並瞭解了 React 在此過程中是如何工作的。如果您在任何地方卡住了，請隨時參考我共享的程式碼： https://github.com/ameertheha...

打造屬於你自己的instagram! 全棧專案(react + egg.js)
2018-12-01
全棧ReactJS
構建基於React18的電子表格程式
2022-06-09
React
JS混淆程式碼資料集構建方法
2024-04-17
JS
構建屬於自己的 Linux 發行版
2023-01-15
Linux
你構建的程式碼為什麼這麼大
2022-12-23
Flutter 6 個建議改善你的程式碼結構
2021-11-08
Flutter
構建屬於自己的Flutter混合開發框架
2020-02-19
Flutter框架
使用JHipster構建Spring和React構建電子商務應用程式原始碼 -DEV
2020-06-25
SpringReact原始碼dev
基於Gitea打造一個屬於你自己的程式碼託管平臺
2020-10-01
Git
Vue.js 原始碼構建
2019-08-27
Vue.js原始碼
用Gradle 構建你的android程式
2021-09-09
GradleAndroid
構建你的第一個Vue.js元件
2019-02-24
Vue.js元件
用Go構建你專屬的JA3指紋
2022-04-14
Go
基於Vite+React構建線上Excel
2022-06-23
ViteReactExcel
嬰兒的出生為你解惑建構函式和構造程式碼塊
2019-04-05
函式
重構你的javascript程式碼
2019-01-21
JavaScript
構建自己的React UI元件庫: 構建首頁
2019-01-01
ReactUI元件
輕鬆構建基於 Serverless 架構的小程式
2020-02-25
Server架構
[譯] 8 個技巧讓你在 2018 年構建更好的 Node.js 應用程式
2019-02-26
Node.js
three.js 製作屬於自己的動態二維碼
2020-07-18
JS
在數小時內構建 CRM：你需要了解的頂級無程式碼/低程式碼工具
2024-08-30
小程式導航來了，快速尋找屬於你的小程式
2019-05-11
你的 JS 程式碼本可以更加優雅
2018-12-02
JS
構建自己的React：（4）Components and State
2019-02-16
React
jscodeshift入門簡介&程式碼重構&程式碼分析&&React
2019-01-08
JSReact
關於 Google 釋出的 JS 程式碼規範，你需要了解什麼？
2018-04-09
GoJS
快，來構建你的專屬世界：NibiruCreaworld正式版將上線
2018-04-17
React之你的第一個React程式
2021-09-09
React
React 筆記 | React 的出現和構建思維
2018-06-28
React筆記
基於開源的 ChatGPT Web UI 專案，快速構建屬於自己的 ChatGPT 站點
2023-04-01
ChatGPTWebUI
react——js原始碼解析
2019-05-13
ReactJS原始碼
優化你的程式碼結構 --- MVP
2018-03-31
優化MVP
LangGraph入門：構建ReACT架構的智慧Agent
2024-11-11
React架構
如何用不到200行程式碼寫一款屬於自己的js類庫
2019-07-04
行程JS
程式碼構建軟體架構圖的工具介紹
2024-08-17
架構
[小團隊自動化] 基於Gitea打造一個屬於你自己的程式碼託管平臺
2019-03-08
Git
使用 nuxi build 命令構建你的 Nuxt 應用程式
2024-08-30
UXUI
CentOS 7 jenkins 程式碼構建同步
2019-12-17
CentOSJenkins