react 生命周期

constructor(props)
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps, nextState)
componentWillUpdate(nextProps, nextState)
render( )
componentDidUpdate(prevProps, prevState )
componentWillUnmount( )

constructor
constructor(props)，组件形成时调用。
constructor 函数可理解为组件的构造函数，从组件的类(class) 实例化一个组件实例。这个函数在组件形成时被调用，是所有生命周期函数中最先执行的。在constructor函数内，如有必要，进行state的初始化以及绑定方法；否则可以省去constructor函数的声明。

constructor 函数内，在执行任何statement之前，必须是super() 函数，如果有参数须将参数带上。
在constructor 函数内，this.props 返回 undefined
不要在初试化state时引用props 里的值，否则每当props更新时，都需要在componentWillReceiveProps 函数内对state进行更新

1
class App extends Component {
  constructor(props) {
    super(props);//------------(1)
    console.log(this.props);// undefined ------------(2)
    //initialize the state
    this.state = {
      value: '',
      color: props.initialColor  // 不可取  ------------(3)
    }
    //bind methods
    this.handleClick = this.handleClick.bind(this);
  }
}

componentWillMount
componentWillMount()，在组件首次渲染(render)之前调用。
mount有安装之意，我们可以理解为组件首次被加载在web中。因此每次页面加载/刷新，或者某个组件第一次加载进入web时可以调用componentWillMount( ) 函数。举个例子，在首次进入文章列表时时，可在 componentWillMount 对所有文章进行查询。这样，在render之前，就能拿到所有文章的数据，以便在render中使用。

1
class PostList extends Component {
  //...
  //在componentWillMount 组件内获取所有博客列表
  componentWillMount(){
    axios.get('/posts')
         .then(res=>{
           //...
         });
  }
  //在 render 函数内将拿到的博客列表 渲染在页面中
  render(){
    //...
  }
}

Render
render()
render 即 渲染函数，是编写组件代码时，唯一一个必须的函数。该函数须有返回值，返回一个组件，即最终渲染出来的组件。在使用组件的class进行组件实例化时，得到的便是其返回值。

一个父标签，这个父标签内可以包含若干个子标签，在最外层标签必须只有一个。
false 或者 null，代表不渲染任何DOM

1
class App extends Component {
  //...
  render(){
    return (
      <div>
          //...
      </div>
    )
  }
}

注意:在render函数中只做与返回组件相关的工作，勿在其中对state进行操作，可以保证每次调用render函数，返回的组件都是相同的。否则将加大项目维护成本。

componentDidMount
componentDidMount()，一旦组件首次加载完成，便会调用
如果需要对渲染出来的DOM节点做任何操作，可以在此处进行。(提示: this.refs 可获取真实DOM)。

在该组件内设置state将会导致组件被重新渲染。

1
class App extends Component {
  //..
  componentDidMount(){
    //将会触发组件重新渲染
    this.setState({
      value: '100'
    })：
    //对节点进行操作
      this.refs.div.appendChild(newChild);
  } 
}

componentWillReceiveProps
componentWillReceiveProps(nextprops)，已加载的组件在 props 发生变化时调用。
如果需要通过监听 props 的改变来修改 state 的值，则可以通过重载该函数实现。

需要注意，在有些情况下，组件的 props 未发生改变也会调用该函数。因此如果在该函数内的逻辑，只是想捕获当前 props 与 接收的 nextProps 的不同来做出一些操作，则最好先将 props 与 nextProps 进行比较。

重点：this.setState({…}) 不触发 componentWillReceiveProps 方法。因为该方法只监听 this.props 的改变，不关心 this.state 值的变化。

1
class App extends Component {
  componentWillReceiveProps(nextProps){
    //接收的颜色 与 当前颜色不同时
    if (this.props.color !== nextProps.color){
      ...
    }
  }
}

shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState)
返回true，重新渲染。紧接着，继续执行 componentWillUpdate() → render() → componentDidUpdate()。
false，不重新渲染。不再执行任何生命周期函数函数（亦不执行该组件的 render( ) 函数）

1
class PostList extends Component {
  shouldComponentUpdate(nextProps, nextState){
    //return true;默认
    return false;// 不更新组件
  }
}

componentWillUpdate
componentWillUpdate(nextProps, nextState)，当 shouldComponentUpdate( ) 方法返回 true 后调用。
这个方法提供了一个为重新渲染作准备的机会，意思是要在这里，趁接下来的 render( ) 方法重新渲染之前，完成该完成的操作。这个方法在 mount 阶段不会被调用，只在 re-render 阶段被调用。

注意，不要在该方法内调用 this.setState({…})，如有需要，请在 componentWillReceiveProps( ) 方法中完成。

1
class App extends Component {
  componentWillUpdate(nextProps, nextState){
    var isLate = this.nextProps.isLate;
    if(isLate){
      //...
    } else {
      //...
    }
  }
}

componentDidUpdate
componentDidUpdate(prevProps, preState)，一旦组件首次更新（重新渲染）完成时调用。
因此像 componentDidMount( ) 一样，如果需要对渲染出来的DOM节点做任何操作，可以在此处进行。(提示: this.refs 可获取真实DOM)。

在该组件内设置state将会导致组件被重新渲染。

1
class App extends Component {
  //..
  componentDidUpdate(){
    //将会触发组件重新渲染
    this.setState({
      value: '100'
    });
    //对节点进行操作
    this.refs.div.appendChild(newChild);
  }
  
}

componentWillUnmount
componentWillUnmount()，在组件即将被卸载(或销毁)之前调用。
在这个方法中，适合做一些清理善后工作。例如清楚timer，取消网络请求，或者清除在 componentDidMount 或 componentDidUpdate 中生成的相关 DOM 节点。