美文网首页
①React开山篇 :生命周期方法详解

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

作者: loycoder | 来源:发表于2017-10-13 19:31 被阅读25次

    备注:以下代码只是解释, 不能运行, 参考 组件的生命周期 ,和阮一峰老师的 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')
    );

    相关文章

      网友评论

          本文标题:①React开山篇 :生命周期方法详解

          本文链接:https://www.haomeiwen.com/subject/jvhtuxtx.html