React生命周期总结

react生命周期流程

1.初始化，首次render

• getDefaultProps()

  getDefaultProps 方法能够用来设置组件属性的默认值,在组件被创建时候就当即调用，全部实例均可以共享这些属性。此时并不可使用this.state和setState。
  注意es6语法中就不这样用了，在前面一篇文章中介绍过了区别。

• getInitialState()

  getInitialState 方法用于定义初始状态,也不可使用this.state和setState。

• componentWillMount()

  componentWillMount只在初始化时候被调用一次，可使用setState方法，会当即更新state，而后接着进行render。

• render()

  注意在render中千万不可以使用setState方法，否则立刻会引发无限的报错了哈哈。若是其中包含其余的子组件，那么子组件的生命周期才开始进行。

• componentDidmount()

  在子组件也都加载完毕后执行，在RN中就是指组件初始化加载完毕，在react中DOM渲染完成，此时就能够操做DOM了。

2.props发生改变时候更新

• componentWillReceiveProps(nextProps)

  componentWillReceiveProps方法能够比较this.props和nextProps来看是否发生了变化，而后能够进行setState等操做。

  注意只要父组件此方法触发，那么子组件也会触发，也就是说父组件更新，子组件也会跟着更新。

• shouldComponentUpdate(nextProps, nextState)

  shouldComponentUpdate 方法在接收了新的props或state后触发，你能够经过返回true或false来控制后面的生命周期流程是否触发。

• componentWillUpdate(nextProps, nextState)

  componentWillUpdate在props或state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

• render()

  从新渲染。

• componentDidupdate(prevProps, prevState)

  会等子组件也都更新完后才触发。

3.state发生改变时候更新

• shouldComponentUpdate(nextProps, nextState)

  shouldComponentUpdate 方法在setState后state发生改变后触发，你能够经过返回true或false来控制后面的生命周期流程是否触发。

• componentWillUpdate(nextProps, nextState)

  componentWillUpdate在state改变或shouldComponentUpdate返回true后触发。不可在其中使用setState。

• render()

  从新渲染。

• componentDidupdate(prevProps, prevState)

  会等子组件也都更新完后才触发。

3.组件销毁

• componentWillUnmount()

  组件销毁时候触发。

使用redux时候状况

在使用redux作状态管理时候，基本不须要透过生命周期去作setState这样的状态管理了，基本都是用props来传递来从新渲染，须要注意的仅仅是在哪一个生命周期时候触发action，好比须要进行ajax请求时候通常都是在componentDidMount和componentWillReceiveProps时候进行，在reducer中处理完，而后在经过props传入组件执行组件的更新周期。

参考资料

1.react生命周期

2.掘金

3.ajax请求