①React开山篇 :生命周期方法详解

备注：以下代码只是解释， 不能运行， 参考 组件的生命周期 ，和阮一峰老师的 demo 。然后个人总结的.如有错误，欢迎指出！

/**
 * 组件的声明周期 方法，详解，依次调用顺序如下:
 * @type {*|Function}
 */
var MyComponent = React.createClass({

    /**
     * 1.该方法在初始化时，只会被调用一次(并且是最先被调用)，
     * 作用： 用于设置 组件的 props 的默认属性， 也可以在挂载的时候，
     *   设置props var data=['1','2']; <MyComponents value={data} />
     *
     *   尽可能的不要调用 setProps()，props 相当于const
     * @returns {{}}
     */
    getDefaultProps: function () {

        console.log('getDefaultProps');

        return {};
    },

    /**
     * 2.该方法个 getDefaultProps 有些类型， 有且只调用一次，在 getDefaultProps 之后执行
     *  作用：用来初始化每个 实例的state，在这个组件的方法里，可以访问组件的 props. 每一个 React的组件,都有自己的state
     *
     *  和props的区别: state 只存在于组件的内部，而props 在所有实例中共享
     *
     *  细节： 每次修改state，都会重新渲染组件，依次调用下列方法：
     *    shouldComponentUpdate
     *    componentWilUpdate
     *    render
     *    componentDidUpdate
     *
     *  但是不要直接修改 this.state 。而要用 setState()方法来修改
     * @returns {{}}
     */
    getInitialState: function () {

        console.log('getInitialState');
        return {};
    },

    /**
     * 3.该方法在首次渲染之前调用【在 getInitialState之后调用】， 也是再 render 方法调用之前修改 state 的最后一次机会。
     *
     */
    componentWillMount: function () {

        console.log('componentWillMount');
    },

    /**
     * 4.该方法会返回一个 virtual DOM（虚拟DOM，并非真实DOM节点）。对于一个组件来说，render方法是唯一必须的方法。 render 方法需要满足以下几点：
     *     1.每个组件都必须要有render方法
     *     2.可以返回 null、false 或 任意React组件
     *     3.只能有一个顶级父组件 
     *     4.只能通过 this.props 和 this.state 来访问数据【不能修改,即不能调用：this.setStats() 或 this.setProps() 】
     *     5.不能修改 DOM的输出
     * @returns {XML}
     */
    render: function () {
        console.log('render');

        return <div></div>;
    },

    /**
     *5.该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的DOM，可以在方法中通过this.getDOMNode()来访问到真实的DOM。
     * 推荐使用 React.findDOMNode();
     */
    componentDidMount: function () {

        console.log('componentDidMount');

    },

    /*=================以下方法是组件创建成功后的存在期交互方法，如：(click,change等)============================================*/
    /**
     依次调用顺序为：
     1、componentWillReceiveProps
     2、shouldComponentUpdate
     3、componentWillUpdate
     4、render
     5、componentDidUpdate
     */

    /**
     * 1.
     *  不知道对不对，暂时这么理解：
     *   当 props 发生改变，componentWilReceiveProps 会被调用，该方法接受一个参数，即被改变的 props,
     *   用于组件 props 变化之后，更新state
     */
    componentWillReceiveProps: function (nextProps) {
        if (nextProps.checked !== undefined) {
            this.setState({
                checked: nextProps.checked
            })
        }
    },

    /**
     * 2.
     * 作用: 改方法返回  布尔值， 用于判断是否需要调用 render 和后面的 componentWilUpdate componentDidUpdate方法，
     * 如何使用： 当我们确定 组件的 props 或者 state 的改变不需要重新渲染,即可以 重写该方法，返回 false 即可
     */
    shouldComponentUpdate: function (nextProps, nextState) {
        return this.state.checked === nextState.checked;
        //return false 则不更新组件
    },

    /**
     * 3. 该方法 和 componentWillMount类似
     *    componentWillMound 和 componentWillUpdate 的区别：
     *      相同点：  都在是 渲染组件之前调用。
     *      不同点：  componentWillMount 是在初始化调用，而componentWillUpdate 是在存在期间的 交互方法调用
     *
     * 注意事项： 不要在此方法再去更新props 或者  state
     */
    componentWillUpdate: function (object_nextProps, object_netState) {

    },

    /**
     * 该方法和 componentDidMount 类似：
     *   在组件被重新渲染之后调用，
     *  作用： 可以在这里访问，并修改 DOM
     */
    componentDidUpdate: function (object_prevProps, object_prevState) {

    },

    /**
     * 该方法在 组件被销毁时调用.
     *
     * 作用：在componentDidMount添加的任务都需要在该方法中撤销。 比如创建的定时器 或者 事件监听器
     *
     * 当再次装载组件时，以下方法会被依次调用：
     *
     *   1、getInitialState
     *   2、componentWillMount
     *   3、render
     *   4、componentDidMount
     */
    componentWillUnmount: function () {

    },


    
     // 有时候需要从组件中获取真实的 DOM节点， 就需要使用  ref属性
       var Area = React.createClass({
                        render: function(){
                            this.getDOMNode(); //render调用时，组件未挂载，这里将报错

                            return <canvas ref='mainCanvas'>
                        },
                        componentDidMount: function(){
                            var canvas = this.refs.mainCanvas.getDOMNode();
                            //这是有效的，可以访问到 Canvas 节点
                        }

ReactDOM.render(
        <MyComponent/>,
    document.getElementById('example')
);