你们好，最近小活发现有诸多的小伙伴们对于react生命周期图，react生命周期这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。
1、先来看一张图，关于react中各个周期的流程
2、从这张图中我们知道了组件的生命周期共有十个方法。
3、方法1、首先是getDefaultProps()方法设置默认的组件属性（this.props）,
4、方法2、然后是getInitialState()方法设置默认的状态（this.state）,
5、方法3、一旦组件的属性和状态都设置好后，就要开始准备渲染组件了，也就是componentWillMount()方法。
6、方法4、准备工作做好后，就是正式渲染组件，也就是render()方法，
7、方法5、ok，经过渲染后组件完全化作DOM节点了，此时也就是组件渲染完成方法componentDidMount().
8、方法6、当组件渲染完成后，可能会发生这几种情况
9、情况一：属性改变。
10、方法7、 属性一旦改变后, 组件就将要接收这属性改变，也就是方法componentWillReceiveProps()，
11、方法8、当然在此时react还是会给你一次反悔的机会的，也就是会执行shouldComponentUpdate方法，如果你不想让他更新，返回false就可以了。如果不返回false，那么他就又会调用组件将要更新方法componentWillUpdate()。
12、方法9、然后执行更新渲染组件的方法render()，最后渲染更新完成componentDidUpdate()，然后就又回到运行状态了。当然要是你阻止了组件更新，传入了false的话，那么组件直接就会忽视这个已经变化
13、的属性，而不改变运行状态。
14、情况二：状态改变。
15、运行中的组件状态一旦改变，那么那个接收组件属性改变的componentWillReceiveProps()方法自然就不会触发，会直接跳到下一步，执行你是否想阻止组件的更新方法shouldComponentUpdate()。然后后面的流程是一样的。
16、情况三: 从DOM节点移除组件
17、方法10、属性或者状态都不改变，而是直接将渲染好的组件移除DOM节点，这会触发方法componentWillUnmount()
18、这样一来，组件的生命周期就直接结束了。除非下次再进行创建这个组件。
19、好了， 10个方法就说完了。
20、——————————————————————————-
21、下面提一下这些方法的特点。
22、1、object getDefaultProps().返回一个属性集合对象
23、首先是第一个getDefaultProps()方法,这个方法是在组件被创建的时候执行，然后等组件创建完成了才能创建其实例对象，然后再这个方法中设置的默认属性是会在所有实例中共享的。
24、它和面向对象编程的静态变量和方法很相似。
25、2、object getInitialState() ，返回一个state集合对象
26、再来说getInitialState方法，他是作用于组件的实例的，在实例创建时调用一次（在组件生命周期中只调用一次），用于初始化每个实例的state，此时可以访问this.props。
27、3、voidcomponentWillMount()，返回一个空对象
28、然后是组件将要被渲染方法componentWillMount()，这个方法执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次.而不会陷入无限的是循环里面去。
29、4、ReactElement render()方法，返回一个react组件
30、调用render()方法时，首先检查this.props和this.state返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现 ，如果不想渲染可以返回null或者false，这种场景下，react渲染一个<noscript>标签，当返回null或者false时，ReactDOM.findDOMNode(this)返回nullrender()方法是很纯净的，这就意味着不要在这个方法里初始化组件的state，每次执行时返回相同的值，不会读写DOM或者与服务器交互，如果必须如服务器交互，在componentDidMount()方法中实现或者其他生命周期的方法中实现，保持render()方法纯净使得服务器更准确，组件更简单
31、5、void componentDidMount()，返回值为空
32、在初始化render之后只执行一次，也就是初始化那次，（非初始化那次的话，组件渲染完成后，执行的都是组件更改完成方法componentDidUpdate()）在这个方法里面可以访问任何组件，如果是组件嵌套，那么最里层的组件的componentDidMount()方法将会先执行，最外层组件的componentDidMount()方法就会最后执行。、从这个函数开始，就可以和 js 其他框架交互了，例如设置计时 setTimeout 或者 setInterval，或者发起网络请求
33、6、booleanshouldComponentUpdate() ,返回true或者false
34、boolean shouldComponentUpdate( object nextProps, object nextState }
35、这个方法在初始化render时不会执行，当props或者state发生变化时执行，并且是在render之前，当新的props或者state不需要更新组件时，返回false
36、shouldComponentUpdate: function(nextProps, nextState) { return nextProps.id !== this.props.id; }
37、当shouldComponentUpdate方法返回false时，就不会执行render()方法，componentWillUpdate和componentDidUpdate方法也不会被调用
38、默认情况下，shouldComponentUpdate方法返回true防止state快速变化时的问题，但是如果·state不变，props只读，可以直接覆盖shouldComponentUpdate用于比较props和state的变化，决定UI是否更新，当组件比较多时，使用这个方法能有效提高应用性能
39、7、void componentWillUpdate()，返回值为空
40、void componentWillUpdate( object nextProps, object nextState )
41、当props和state发生变化时执行，并且在render方法之前执行，当然初始化render时不执行该方法，需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了
42、8、voidcomponentDidUpdate(),无返回值
43、void componentDidUpdate( object prevProps, object prevState )
44、组件更新结束之后执行，在初始化render时不执行
45、9、voidcomponentWillReceiveProps() ,无返回值
46、void componentWillReceiveProps( object nextProps )
47、当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
48、componentWillReceiveProps: function(nextProps) { this.setState({ likesIncreasing: nextProps.likeCount > this.props.likeCount }); }10、void componentWillUnmount(),无返回值。
49、10、 void componentWillUnmount()
50、当组件要被从界面上移除的时候，就会调用componentWillUnmount(),在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等
51、通过代码来观察运行状态
52、<html>
53、<head>
54、<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
55、</head>
56、<body>
57、<script src=”js/react.js”></script>
58、<script src=”js/react-dom.js”></script>
59、<div id=”life”></div>
60、<script>
61、//——自定义组件 MyComponent
62、—–
63、var MyComponent=React.createClass({
64、Change:function(e){//当value改变时的onChange方法
65、this.setState({
66、state1:e.target.value,
67、});
68、ReactDOM.render(
69、React.DOM.div({id:”hezi”,},React.createElement(MyComponent,{pro1:”我是属性666″})), //通过从新渲染的方式改变属性
70、document.getElementById(“life”)
71、);
72、//ReactDOM.render(
73、//React.DOM.div(null,”hello”), //通过从新渲染的方式移除组件，componentWillUnmount();
74、//document.getElementById(“life”)
75、//);
76、},
77、//依次测试组件的10个生命周期方法
78、getDefaultProps:function(){ //设置默认的属性值
79、console.log(“MyComponent–getDefaultProps”,arguments);
80、return {
81、pro1:”我是1″,
82、pro2:”我是2″,
83、pro3:”我是3″
84、};
85、},
86、getInitialState:function(){ //初始化状态值
87、console.log(“MyComponent–getInitialState”,arguments);
88、return{
89、state1:”我是状态1″,
90、state2:”我是状态2″
91、};
92、},
93、componentWillMount:function(){ //组件将要渲染
94、console.log(“MyComponent–componentWillMount”,arguments);
95、},
96、//——————
97、render:function(){ //组件正式渲染
98、console.log(“MyComponent–render”,arguments);
99、return React.DOM.input({
100、value:this.props.pro1+this.props.pro2+this.state.state1,
101、onChange:this.Change,
102、style:{ //style写成对象的形式
103、width:”400px”,
104、color:”red”,
105、}
106、});
107、},
108、//—————–
109、componentDidMount:function(){ //组件渲染完成
110、console.log(“MyComponent–componentDidMount”,arguments);
111、},
112、//—————-
113、componentWillReceiveProps:function(){ //在运行状态中更改了属性触发的方法
114、console.log(“MyComponent–componentWillReceiveProps”,arguments);
115、console.log(this.props.pro1);//验证在拿取旧的props值
116、},
117、//—————-
118、shouldComponentUpdate:function(){ //给你一次打断更新的机会的方法
119、console.log(“MyComponent–shouldComponentUpdate”,arguments);
120、return true;
121、//return false;
122、},
123、//—————–
124、componentWillUpdate:function(){ //组件将要更新，如果上一个方法没有阻断的话，就会执行到这个方法里来
125、console.log(“MyComponent–componentWillUpdate”,arguments);
126、},
127、//—————–
128、componentDidUpdate:function(oldProps,oldState){ //组件更新渲染完成，在第一次渲染时不执行
129、console.log(“MyComponent–componentDidUpdate”,arguments);
130、//if(this.state.state1!=”我是状态1″)
131、//this.replaceState(oldState); //替换组件
132、},
133、//—————–
134、componentWillUnmount:function(){ //组件将从DOM中卸载
135、console.log(“MyComponent–componentWillUnmount”,arguments);
136、},
137、//—————–
138、});
139、//——开始渲染组件—–
140、ReactDOM.render(
141、React.DOM.div({id:”hezi”,},React.createElement(MyComponent,{pro1:”我是属性1″})),
142、document.getElementById(“life”)
143、);
144、</script>
145、</body>
146、</html>
147、查看运行结果，当程序运行后，会经历生命周期方法：
148、1. 初始化属性 getDefaultProps，
149、2. 初始化状态 getInitialState，
150、3. 组件将要渲染 componentWillMount，
151、4. 组件开始渲染render,
152、5.渲染完成componentDidMount，
153、渲染完成后有三种情况，如下：
以上就是react生命周期这篇文章的一些介绍，希望对大家有所帮助。
