react 组件的生命周期 超简版

　　组件从被建立到被销毁的过程称为组件的 生命周期；

　　一般，组件的生命周期能够被分为三个阶段：挂载阶段、更新阶段、卸载阶段；

　　1、挂载阶段

　　这个阶段组件被建立，执行初始化，并被挂载到DOM中，完成组件的第一次渲染。

　　依次调用的生命周期方法有：

• • 　　constructor
  • 　　componentWillMount
  • 　　render
  • 　　componentDidMount

　　一、constructor　　　　

　　这是ES 6 class的构造方法，组件被建立时，会首先调用组件的构造方法。这个构造方法接收一个props参数，props是从父组件中传入的属性对象，若是父组件中没有传入属性而组件自身定义了默认属性，那么这个props指向的就是组件的默认属性。你必须在这个方法中首先调用super(props)才能保证props被传入组件中。constructor一般用于初始化组件的state以及绑定事件处理方法等工做。

　　二、componentWillMount

　　这个方法在组件被挂载到DOM前调用，且只会被调用一次。这个方法在实际项目中不多会用到，由于能够在该方法中执行的工做均可以提早到constructor中。在这个方法中调用this.setState不会引发组件的从新渲染。

　　三、render

　　这是定义组件时惟一必要的方法（组件的其余生命周期方法均可以省略）。在这个方法中，根据组件的props和state返回一个React元素， 用于描述组件的UI，一般React元素使用JSX语法定义。须要注意的是，render并不负责组件的实际渲染工做，它只是返回一个UI的描述，真正的渲染出页面DOM的工做由React自身负责。render是一个纯函数，在这个方法中不能执行任何有反作用的操做，因此不能在render中调用this.setState，这会改变组件的状态。

　　四、componentDidMount

　　问问在组件被挂载到DOM后调用，且只会被调用一次。这时候已经可以获取到DOM结构，所以依赖DOM节点的操做能够放到这个方法中。这个方法一般还会用于向服务器端请求数据。在这个方法中调用this.setState会引发组件的从新渲染。

 

　　

　　2、更新阶段

　　组件被挂载到DOM后，组件的props或state能够引发组件更新。
　　props引发的组件更新，本质上是由渲染该组件的父组件引发的，也就是当父组件的render方法被调用时，组件会发生更新过程，这个时候， 组件props的值可能发生改变，也可能没有改变，由于父组件可使用相同的对象或值为组件的props赋值。可是，不管props是否改变，父组件render方法每一次调用，都会致使组件更新。State引发的组件更新， 是经过调用this.setState修改组件state来触发的。组件更新阶段。

　　依次调用的生命周期方法有：

• •       componentWillReceiveProps
  • 　　shouldComponentUpdate
  • 　　componentWillUpdate
  • 　   render
  •       componentDidUpdate

 　　一、componentWillReceiveProps(nextProps)　　　　

　　这个方法只在props引发的组件更新过程当中，才会被调用。State引发的组件更新并不会触发该方法的执行。方法的参数nextProps是父组件传递给当前组件的新的props。但如上文所述，父组件render方法的调用并不能保证传递给子组件的props发生变化，也就是说nextProps的值可能和子组件当前props的值相等，所以每每须要比较nextProps和this.props 来决定是否执行props发生变化后的逻辑，好比根据新的props调用this.setState触发组件的从新渲染。

　　二、shouldComponentUpdate（nextProps, nextState）　　　

　　这个方法决定组件是否继续执行更新过程。当方法返回true时（true也是这个方法的默认返回值），组件会继续更新过程；当方法返回false 时，组件的更新过程中止，后续的componentWillUpdate、render、componentDidUpdate也不会再被调用。通常经过比较nextProps、nextState和组件当前的props、state决定这个方法的返回结果。这个方法能够用来减小组件没必要要的渲染，从而优化组件的性能。

　　三、componentWillUpdate（nextProps, nextState）　　　

　　这个方法在组件render调用前执行，能够做为组件更新发生前执行某些工做的地方，通常也不多用到。

　　四、componentDidUpdate（prevProps, prevState）　　　

　　组件更新后被调用，能够做为操做更新后的DOM的地方。这个方法的两个参数prevProps、prevState表明组件更新前的props和state。

 

　　2、卸载阶段

　　组件从DOM中被卸载的过程;

　　依次调用的生命周期方法有：

• •       componentWillUnmount

 

 　　一、componentWillUnmount　　　　

　　这个方法在组件被卸载前调用，能够在这里执行一些清理工做，好比清除组件中使用的定时器，清除componentDidMount中手动建立的DOM元素等，以免引发内存泄漏；

 

 

　　敲黑板时间

　　　　关于组件的周期，看下来其实并无很复杂，react团队已经作的很好了；

 

　　参考文本：

　　　　React+进阶之路；(PS: 此书很棒，感谢巨人；)