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

（未完待续）