【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() {}
);

（未完待续）