React组件的生命周期(LeftCycle)详解

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/53887605

React组件的生命周期(LeftCycle)详解

React是Facebook推出的一个用于创建用户界面的JavaScript库,是现在最热门的前端框架。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）,使用它的目的在于能够构建随着时间数据不断变化的大规模应用。React使用非常的灵活,你可以新建一个项目使用它,也可以把它引入到一个已有的代码库或者是项目中,它可以与已知的库或框架很好的配合使用。React为了更好的性能而使用虚拟DOM实现,虚拟DOM安插在JavaScript逻辑和实际的DOM之间,在渲染过程中通过对虚拟DOM的操作来实现对实际DOM的局部更新,最大限度的减少与DOM的交互,它同时也可以在服务器端使用NodeJs渲染,从而不需要过重的浏览器DOM支持。React实现了单向响应的数据流-单向数据流,让数据显示流动,使你理解应用如何工作变的简单,但是它确实比传统双向数据绑定要多一些代码。React是基于组件化和模块化的,它可以构建可复用的组件,每个组件都可以进行单独的测试和开发,而且可以嵌套使用,不仅提高了代码的可维护性也提高编写代码效率。JSX是JavaScript语法的扩展,但是React开发不一定要使用JSX,只是推荐使用。

1.生命周期
React是基于组件的构建和封装你的组件,构建封装你的组件，管理好你的状态state,使其变成一个多个组件组成的复杂交互界面。因为是使用的jsx语法，js和html是在一起的.可以更好的控制状态来更新DOM。
React适合非常轻松的创建交互界面. 设计一个简单的状态机在你的应用程序里,当数据发生改变时,可以有效及正确的更新和呈现你的组件。React的每个组件都有自己的生命周期,通过生命周期钩子函数去响应不同的时刻,组件的生命周期分为三个部分:(1)实例化  (2)存在期 (3)销毁&清理器。各个生命周期的方法如下图所示:

2.实例化
实例化阶段是给用户第一印象的阶段,实例化阶段的快慢直接影响到用户的体验,对于实例化慢的界面可能还没有展现出来用户就选择了离开,因此实例化阶段是非常重要的阶段。实例化阶段包括5个方法:
(1)getDefaultProps 在组件类创建的时候调用一次,而且只调用一次,然后返回值会被缓存下来。返回值用于设置默认的props,如果父控件没有设置props中的某个值, 那么getDefaultProps设置的默认值对应的某个属性将会合并到props,意思就是说使用该组件的开发人员如果你没有设置props的某个属性,你可以在这里设置默认的值,而不让程序报错。该方法在类第一次创建的时候调用,也就是在任何实例调用之前调用,比如使用require('./leftcycle/LeftCycle')就会调用该方法。getDefaultProps返回的任何对象都会在实例之间共享,如果你多次的require或者import类,只会在第一次require或者import的时候调用。
(2)getInitialState 在组件实例创建的时候调用一次,用于初始化每个实例的this.state。如果在该方法中使用this.props中的值初始化State是一种反模式,反模式的参考资料:点击打开链接  点击打开链接
(3)componentWillMount 在首次完成渲染之前调用,基本业务逻辑都应该放到这里,该方法是你在该次渲染之前修改state的最后一次机会。如果你在这里修改了State,render()将会使用更新后的state,只会执行一次,不会重复的渲染。
(4)render 渲染并返回一个虚拟DOM 只能通过this.props和this.state访问数据;可以返回null、false或任何React组件;只能出现一个顶级组件（不能返回数组）;不能改变组件的状态;不能修改DOM的输出
(5)componentDidMount 该方法调用在render渲染返回的虚拟DOM对象成功创建真实的DOM结构之后,在该方法中可以使用this.getDOMNode()访问到真实的DOM元素,也可以使用其他的类库来操作DOM元素。一般情况下网络请求(AJAX)可以放到DOM渲染完成之后也就是放到这个方法中执行。

//1.创建阶段  也就是类创建的时候调用
getDefaultProps(){
    console.log('getDefaultProps' + " === LeftCycle");


},

//2.实例化阶段
getInitialState(){
    console.log('getInitialState');
    return {
        userName:'111'
    };
},

//3.render之前调用，一般业务逻辑都应该放在这里，如对state的操作等
componentWillMount(){
    console.log('componentWillMount');
},

//渲染并返回一个虚拟DOM
render(){
    console.log('render');
    return <div>
        SMZQ{this.state.userName}

        <input onChange={(event)=>{
            //console.log(event.target.value);
            this.setState({userName:event.target.value});
        }}/>

    </div>
},

//4.用于网络请求和操作DOM,因为该方法之前真实的DOM已经渲染完成
componentDidMount(){
    console.log('componentDidMount');
}

运行输出的结果如下所示:

getDefaultProps === LeftCycle
getInitialState
componentWillMount
render
componentDidMount

3.存在期
存在期是界面首次加载完成之后的周期,是系统和用户进行交互的阶段,一般是通过用户的操作来触发某个事件。随着用户改变了组件的状态,React会根据系统设计部分的渲染某个DOM。存在期包括4个方法:
(1)componentWillReceiveProps props是从父组件传过来的,是动态的可以修改的。如果props修改了,组件接收到新的props的时候就会调用该方法,但是在初始化的时候该方法不会调用。介绍到的props数据可以作为参数nextProps使用,此时可以修改组件的props和state,这里修改的state也不会引起render的重复渲染。
(2)shouldComponentUpdate 组件是否需要渲染新的props或state,可以通过这个方法拦截,开发者可以根据自己的设计决定。返回false表示跳过后续的生命周期,默认情况下shouldComponentUpdate返回的是true,在state或者props改变的时候调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。
(3)componentWillUpdate 在接收到新的props或者是state的时候render之前调用,在该方法中不再允许更新props和state,如果你需要更新props或者state,你可以在componentWillReceiveProps中修改。
(4)render
(5)componentDidUpdate  完成渲染新的props或者state后调用,和componentDidMount类似,此时可以操作新的DOM元素。

//更新阶段 当组件接收到新的props时触发
componentWillReceiveProps(){
    console.log('componentWillReceiveProps');
},

//是否需要更新
shouldComponentUpdate() {
    console.log('shouldComponentUpdate');
    return true;
},

//将要更新
componentWillUpdate(){
    console.log('componentWillUpdate');
},

//渲染并返回一个虚拟DOM
render(){
    console.log('render');
    return <div>
        SMZQ{this.state.userName}

        <input onChange={(event)=>{
            //console.log(event.target.value);
            this.setState({userName:event.target.value});
        }}/>

    </div>
},

//更新之后
componentDidUpdate() {
    console.log('componentDidUpdate');
}

运行输出的结果如下所示:

componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

4.销毁&清理
销毁&清理期是在用户离开界面时候,需要释放一些不再需要的或者很少使用的资源来减少内存的压力。
componentWillUnmount 组件被移除之前调用,可以用于做一些清理工作,在componentDidMount中添加的所有任务都需要在该方法中撤销,比如创建的定时器或创建的DOM元素。

//销毁阶段
componentWillUnmount(){
    console.log('componentWillUnmount');
}

运行输出的结果如下所示:

componentWillUnmount

整个案例的完整代码如下:

let React = require('react');

const LeftCycle = React.createClass({

    //1.创建阶段  也就是类创建的时候调用
    getDefaultProps(){
        console.log('getDefaultProps' + " === LeftCycle");

    },

    //2.实例化阶段
    getInitialState(){
        console.log('getInitialState');
        return {
            userName:'111'
        };
    },

    //3.render之前调用，一般业务逻辑都应该放在这里，如对state的操作等
    componentWillMount(){
        console.log('componentWillMount');
    },

    //4.用于网络请求和操作DOM,因为该方法之前真实的DOM已经渲染完成
    componentDidMount(){
        console.log('componentDidMount');
    },

    //更新阶段 当组件接收到新的props时触发
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
    },

    //是否需要更新
    shouldComponentUpdate() {
        console.log('shouldComponentUpdate');
        return true;
    },

    //将要更新
    componentWillUpdate(){
        console.log('componentWillUpdate');
    },

    //渲染并返回一个虚拟DOM
    render(){
        console.log('render');
        return <div>
            SMZQ{this.state.userName}

            <input onChange={(event)=>{
                //console.log(event.target.value);
                this.setState({userName:event.target.value});
            }}/>

        </div>
    },

    //更新之后
    componentDidUpdate() {
        console.log('componentDidUpdate');
    },

    //销毁阶段
    componentWillUnmount(){
        console.log('componentWillUnmount');
    }
});

module.exports = LeftCycle;

参考资料:点击打开链接  点击打开链接  

React组件的生命周期(LeftCycle)详解

博客地址：http://blog.csdn.net/pcaxb/article/details/53887605