React@15.6.2源码解析---从 ReactDOM.render 到页面渲染（1）ReactMount

---

title: React@15.6.2源码解析—从 ReactDOM.render 到页面渲染（1）ReactMount
tags:
- js
- react

之前介绍了React16.8版本的React公用API，本着学习最新版的React的想法，但是败在了Fiber的阵下，还有回过头来写搞明白React15的源码，毕竟从15到16是一次重大的更新。本文中React源码版本为 15.6.2 ，望各位看官找准版本号，不同的版本还是有着细微的区别的

值得一提的是，在阅读源码时，在Chrome中打断点是一个很好的操作，可以了解到函数的调用栈，变量的值，一步一步的调试还可以了解整个执行的流程，一边调试一边记录着流程一边在加以理解一边感慨这神乎其技的封装。

博客会同步到github上，这样也算是有了开源的项目。欢迎各位看官指教！

准备步骤

首先需要安装 React@15.6.2， ReactDOM@15.6.2 ，其次搭建webpack打包，因为必不可少的需要console.log啥的，另外需要babel的配置，babel6 babel7倒是无所谓，关键是可以解析我们的jsx语法。

示例代码

import React from 'react';
import ReactDom from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'Hello World'
        }
    }
    componentWillMount() {
        console.log('component will mount');
        this.setState({
            name: 'Hello CHina'
        })
    }
    componentDidMount() {
        console.log('component did mount');
        this.setState({
            name: 'Hello CHange'
        })
    }
    componentWillReceiveProps(nextProps) {
        console.log('component will receive props');
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('component will updates');
    }
    componentDidUpdate(prevProps, prevState){
        console.log('component Did Update');
    };
    render() {
        console.log('render');
        return (
            <div>
                { this.state.name }
            </div>
        )
    }
};

ReactDom.render(
    <App>
        <div>Hello World</div>
    </App>,
    document.getElementById('root')
);

本片博客就是基于该代码进行调试的，将这段代码使用babel转码之后的结果为

// 主要代码段
var App =
  /*#__PURE__*/
  function (_React$Component) {
    _inherits(App, _React$Component);

    function App(props) {
      var _this;

      _classCallCheck(this, App);

      _this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this, props));
      _this.state = {
        name: 'Hello World'
      };
      return _this;
    }

    _createClass(App, [{
      key: "componentWillMount",
      value: function componentWillMount() {
        console.log('component will mount');
        this.setState({
          name: 'Hello CHina'
        });
      }
    }, {
      key: "componentDidMount",
      value: function componentDidMount() {
        console.log(&#