【Under-the-hood-ReactJS-Intro】React源碼解讀

seasonley 發(fā)布于2019-08-22 18:16 / 1767人閱讀

摘要：所以為了簡化流程，這些的代碼都先暫時(shí)忽略了。也就是說，每個(gè)平臺都有獨(dú)立的實(shí)現(xiàn)。我們將調(diào)試兩個(gè)過程，和分別對應(yīng)掛載和更新兩個(gè)階段。

概述：
先看看React的架構(gòu)圖：
https://bogdan-lyashenko.gith...

好好看一下上圖，初看看起來好像很復(fù)雜，但是事實(shí)上，它只描述了兩個(gè)過程：掛載和更新。由于卸載在某種程度上就是“反掛載”，上圖中我們移除了卸載的過程，以使得流程圖看起來更簡單些。當(dāng)然，上圖不是100%匹配源碼，但是已經(jīng)能夠用來描述react架構(gòu)的主要流程了。簡而言之，上圖覆蓋了60%的代碼，但是剩下的40%基本上沒有什么特別大的價(jià)值。所以為了簡化流程，這些40%的代碼都先暫時(shí)忽略了。

我們先在圖中看下模塊之間的依賴關(guān)系。

正如你所知，React是支持多個(gè)環(huán)境的：
1 手機(jī)端（RaectNative）
2 游覽器端（ReactDOM）
3 服務(wù)端渲染
4 ReactART（使用React繪制矢量圖）
5 其他

正是為了支持多平臺，上圖中很多文件的代碼量是比圖里展現(xiàn)的要多的多。以下是包含多平臺支持的流程圖。

正如你所見，一些內(nèi)容被重復(fù)了兩次。也就是說，每個(gè)平臺都有獨(dú)立的實(shí)現(xiàn)。比如說，ReactEventListener。很顯然，這個(gè)方法的實(shí)現(xiàn)在不同的平臺是不同的。技術(shù)上來說，這些平臺獨(dú)立模塊應(yīng)該會以某種方法注入或者連接到當(dāng)前的邏輯過程中，其實(shí)，這些模塊中有很多像這樣的injectors。因?yàn)樗鼈兊恼Z法是標(biāo)準(zhǔn)合成模式的一部分，為了簡化，它們也被暫時(shí)忽略了。

我們先學(xué)習(xí)下React DOM在游覽器中的邏輯流程。這是用的最多的平臺，同時(shí)這個(gè)函數(shù)基本上也覆蓋了React架構(gòu)的所有思想。

代碼示列：
學(xué)習(xí)一個(gè)框架或者庫的最后的辦法是什么呢？閱讀和調(diào)試代碼。我們將調(diào)試兩個(gè)過程，React.render和component.setState,分別對應(yīng)掛載和更新兩個(gè)階段。我們的實(shí)例代碼包含幾個(gè)帶有render方法的小組件，這樣會更有利于我們調(diào)試。

class ChildCmp extends React.Component {
    render() {
        return  {this.props.childMessage} 
    }
}

class ExampleApplication extends React.Component {
    constructor(props) {
        super(props);
        this.state = {message: "no message"};
    }

    componentWillMount() {
        //...
    }

    componentDidMount() {
        /* setTimeout(()=> {
            this.setState({ message: "timeout state message" });
        }, 1000); */
    }

    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }

    componentDidUpdate(prevProps, prevState, prevContext) {
        //...
    }

    componentWillReceiveProps(nextProps) {
        //...
    }

    componentWillUnmount() {
        //...
    }

    onClickHandler() {
        /* this.setState({ message: "click state message" }); */
    }

    render() {
        return 
            
            
            And some text as well!
        
    }
}

ReactDOM.render(
    ,
    document.getElementById("container"),
    function() {}
);

（未完待續(xù)）