你们好，最近小活发现有诸多的小伙伴们对于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渲染一个
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、
53、
54、
55、
56、
57、
58、
59、
60、
145、
146、
147、查看运行结果，当程序运行后，会经历生命周期方法：
148、1. 初始化属性 getDefaultProps，
149、2. 初始化状态 getInitialState，
150、3. 组件将要渲染 componentWillMount，
151、4. 组件开始渲染render,
152、5.渲染完成componentDidMount，
153、渲染完成后有三种情况，如下：
以上就是react生命周期这篇文章的一些介绍，希望对大家有所帮助。
标签：
免责声明：本文由用户上传，如有侵权请联系删除！