React组件的10个生命周期的代码实例

我们来谈谈reactjs组件的10个生命周期问题

工具/原料

react包，浏览器

方法/步骤

先来看一张图，关于react中各个周期的流程

从这张图中我们知道了组件的生命周期共有十个方法。方法1、首先是getDefaultProps()方法设置默认的组件属性（this.props）,方法2、然后是getInitialState()方法设置默认的状态（this.state）,方法3、一旦组件的属性和状态都设置好后，就要开始准备渲染组件了，也就是componentWillMount()方法。方法4、准备工作做好后，就是正式渲染组件，也就是render()方法，方法5、ok，经过渲染后组件完全化作DOM节点了，此时也就是组件渲染完成方法componentDidMount().方法6、当组件渲染完成后，可能会发生这几种情况情况一：属性改变。方法7、属性一旦改变后, 组件就将要接收这属性改变，也就是方法componentWillReceiveProps()，方法8、当然在此时react还是会给你一次反悔的机会的，也就是会执行shouldComponentUpdate方法，如果你不想让他更新，返回false就可以了。如果不返回false，那么他就又会调用组件将要更新方法componentWillUpdate()。方法9、然后执行更新渲染组件的方法render()，最后渲染更新完成componentDidUpdate()，然后就又回到运行状态了。当然要是你阻止了组件更新，传入了false的话，那么组件直接就会忽视这个已经变化的属性，而不改变运行状态。情况二：状态改变。运行中的组件状态一旦改变，那么那个接收组件属性改变的componentWillReceiveProps()方法自然就不会触发，会直接跳到下一步，执行你是否想阻止组件的更新方法shouldComponentUpdate()。然后后面的流程是一样的。情况三: 从DOM节点移除组件方法10、属性或者状态都不改变，而是直接将渲染好的组件移除DOM节点，这会触发方法componentWillUnmount()这样一来，组件的生命周期就直接结束了。除非下次再进行创建这个组件。好了， 10个方法就说完了。-------------------------------------------------------------------------------

下面提一下这些方法的特点。1、object getDefaultProps().返回一个属性集合对象首先是第一个getDefaultProps()方法,这个方法是在组件被创建的时候执行，然后等组件创建完成了才能创建其实例对象，然后再这个方法中设置的默认属性是会在所有实例中共享的。它和面向对象编程的静态变量和方法很相似。2、object getInitialState() ，返回一个state集合对象再来说getInitialState方法，他是作用于组件的实例的，在实例创建时调用一次（在组件生命周期中只调用一次），用于初始化每个实例的state，此时可以访问this.props。3、void componentWillMount()，返回一个空对象然后是组件将要被渲染方法componentWillMount()，这个方法执行一次，在初始化render之前执行，如果在这个方法内调用setState，render()知道state发生变化，并且只执行一次.而不会陷入无限的是循环里面去。4、ReactElement render()方法，返回一个react组件调用render()方法时，首先检查this.props和this.state返回一个子元素，子元素可以是DOM组件或者其他自定义复合控件的虚拟实现，如果不想渲染可以返回null或者false，这种场景下，react渲染一个

欧尼酱

React组件的10个生命周期的代码实例