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

概述：
先看看React的架構圖：
https://bogdan-lyashenko.gith...

好好看一下上圖，初看看起來好像很複雜，可是事實上，它只描述了兩個過程：掛載和更新。因爲卸載在某種程度上就是「反掛載」，上圖中咱們移除了卸載的過程，以使得流程圖看起來更簡單些。 固然，上圖不是100%匹配源碼，可是已經可以用來描述react架構的主要流程了。簡而言之，上圖覆蓋了60%的代碼，可是剩下的40%基本上沒有什麼特別大的價值。因此爲了簡化流程，這些40%的代碼都先暫時忽略了。

咱們先在圖中看下模塊之間的依賴關係。

正如你所知，React是支持多個環境的：
1 手機端（RaectNative）
2 遊覽器端（ReactDOM）
3 服務端渲染
4 ReactART（使用React繪製矢量圖）
5 其餘

正是爲了支持多平臺，上圖中不少文件的代碼量是比圖裏展示的要多的多。 如下是包含多平臺支持的流程圖。

正如你所見，一些內容被重複了兩次。也就是說，每一個平臺都有獨立的實現。好比說，ReactEventListener。很顯然，這個方法的實如今不一樣的平臺是不一樣的。技術上來講，這些平臺獨立模塊應該會以某種方法注入或者鏈接到當前的邏輯過程當中，其實，這些模塊中有不少像這樣的injectors。由於它們的語法是標準合成模式的一部分，爲了簡化，它們也被暫時忽略了。

咱們先學習下React DOM在遊覽器中的邏輯流程。 這是用的最多的平臺，同時這個函數基本上也覆蓋了React架構的全部思想。

代碼示列：
學習一個框架或者庫的最後的辦法是什麼呢？閱讀和調試代碼。咱們將調試兩個過程，React.render和component.setState,分別對應掛載和更新兩個階段。咱們的實例代碼包含幾個帶有render方法的小組件，這樣會更有利於咱們調試。

class ChildCmp extends React.Component {
    render() {
        return <div> {this.props.childMessage} </div>
    }
}

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 <div>
            <button onClick={this.onClickHandler.bind(this)}> set state button </button>
            <ChildCmp childMessage={this.state.message} />
            And some text as well!
        </div>
    }
}

ReactDOM.render(
    <ExampleApplication hello={'world'} />,
    document.getElementById('container'),
    function() {}
);

（未完待續）