React生命周期总结

基本上所有React组件生命周期方法可以分为下面三个阶段

一、挂载(Mounting): 这个阶段发生在组件被创建并被插入到DOM时**

constructor(props)
在React组件被挂载之前，构造器constructor()首先被调用，由于继承了React.Component，我们必须在其他语句之前首先调用super(props)；否则，在构造器中this.props的值为undefined，从而引发错误
componentWillMount()
在组件挂载之前，componentWillMount()方法将会被调用。componentWillMount()方法在render()方法之前被调用，所以在该方法中设置状态不会触发重新渲染。

render()
render()方法是必须的，并返回null、false 或者一个React Element。 当返回 null 或者 false 时，表示你不想渲染任何东西；并且ReactDOM.findDOMNode(this)将会返回null。 render()应该是纯粹的（pure），它不应该修改组件的状态，每次调用 都会返回相同的结果，它不直接与浏览器交互。如果我们想与浏览器进行交互，我们应该在componentDidMount()方法中完成相应的功能。

componentDidMount()
componentDidMount()将会在组件挂载之后被调用，在该方法中修改state将会触发重新渲染。可以在该方法中加载远程数据，然后根据新的数据重新渲染DOM。该方法不会在服务端被渲染过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过this.getDOMNode()访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

二、更新(Updating): 这个阶段发生在组件被重新渲染成虚拟DOM并决定实际DOM是否需要更新时**

componentWillReceiveProps(nextProps)
组件的props可以通过父辈组件来更改， componentWillReceiveProps()会在一个被挂载的组件接收到新属性的时候被调用，有的时候尽管没有属性发生改变，React 依然会调用componentWillReceiveProps()，所以如果我们只想处理属性改变的情况，我们需要对比 this.props 和 nextProps 。 在初始挂载的时候componentWillReceiveProps不会被调用，调用this.setState通常不会触发componentWillReceiveProps。

shouldComponentUpdate(nextProps, nextState)
默认情况下，在状态发生改变的时候，组件会重新渲染，在渲染之前，shouldComponentUpdate()将会被调用，默认返回true。在组件初始渲染或者调用forceUpdate()时，该方法不会被调用。 如果shouldComponentUpdate()返回false，那么componentWillUpdate()、render()、componentDidUpdate()将不会被调用，但是返回false不会影响子组件的重新渲染。
componentWillUpdate(nextProps, nextState)
在渲染之前，componentWillUpdate()将会被调用，组件第一次渲染之前不会调用该方法。 注意，我们不能在这里调用this.setState()，如果我们需要更新状态，我们应该在componentWillReceiveProps()中进行更新。

componentDidUpdate(prevProps, prevState)
更新完成之后，componentDidUpdate()会被立即调用，组件第一次渲染完成之后不会调用该方法。

三、卸载(Unmounting): 这个阶段发生在组件从DOM中被删除时**

componentWillUnmount()
在组件卸载之前，componentWillUnmount()方法会被调用

react生命周期顺序图解

生命周期总结

• 首次实例化：getDefaultProps——>getInitialState——>componentWillMount——>render——>componentDidMount
• 实例化完成后的更新：getInitialState——>componentWillMount——>render——>componentDidMount
• 父组件改变，子组件生命周期：componentwillReceiveProps——>shouldComponentUpdate——>componentWillUpdate——>render——>omponentDidUpdate

父组件与子组件渲染

1. 一个组件加载完毕后，如果既没有外部驱动，也没有内部驱动，是不会进行重新渲染的。

2. 组件想要对自身进行刷新，可以通过调用setState()或者forceUpdate()来实现，这是让组件刷新的内部驱动

3. 父组件通过给子组件传递props，告知子组件有可能重新渲染，子组件自己根据传来的数据（在componentWillReceiveProps方法中）决定是否有必要进行重新渲染。

   父组件可以通过props吧数据传递给子组件，但需要注意的是这个传递动作只发生render的过程中，在组件已经渲染完毕后，传递会停止。
   假如父组件内部定义了变量A ，并赋给了子组件某个属性，当A的值发生改变，并不足以让子组件刷新。只要A的变化不足以引发父组件调用自身render方法进行重新渲染，就不会传递。

组件的数据传递需要render驱动，而不是由数据变化驱动的。

在父组件中调用setState()或者forceUpdate()都可以引起组件对自身的重新渲染。这就完成了第一步，成功把props传给子组件。而子组件有全决定当接收到外部传来的属性的时候要怎么处理，具体实现在componentWillReceiveProps方法里，在组件首次渲染完毕之后，这个方法会在组件每次接收到外部传来的props的时候被调用。

4. shouldComponentUpdate方法

   shouldComponentUpdate方法默认返回true，这就导致了每次更新都重新渲染。

   当React将要渲染组件时他会执行shouldComponentUpdate方法来看它是否返回true（组件应该更新，也就是重新渲染）。你只要重写shouldComponentUpdate方法让他根据情况返回true或者false来告诉React什么时候重新渲染。