react组件的生命周期

一般来说，一个组件类由 extends Component 创建，并且提供一个 render 方法以及其他可选的生命周期函数、组件相关的事件或方法来定义

getInitialState （es5）

初始化 this.state 的值，只在组件装载之前 调用一次 。
如果是使用 ES6 语法，可以在构造函数 construcror 中初始化state的值。例如：

class Home extends React.Component {
  constructor(props){
  super(props);
  //初始化state
  this.state = {
    show:false
  }
}
}

getDefaultProps （es5）

该方法只在组件创建时 调用一次 并缓存返回的对象（即在 React.createClass 之后就会调用）。
初始化this.props的值，即在组件装载后，缓存的结果会用来保证父组件还没传入属性的值时，访问 this.props 的属性，也是有值的。
因在实例初始化之前调用的，故不能使用this获取到实例。

如果是使用 ES6 语法，可以直接定义 defaultProps 这个类属性来初始化props

Home.defaultProps = { initialCount: 0 };

componentWillMount

在首次渲染之前调用，而且 只调用一次。
这里可以修改state，也是在 render 方法调用之前修改 state 的最后一次机会，不会导致重新渲染（state或者props发生改变并不会触发）。
也可以做异步请求数据ajax/fetch（但不建议，因为DOM还没有渲染，个时候的一些DOM操作就会出错）。
此处如更改state会在render()渲染时才能获取修改后的state

render

渲染组件
这是 唯一必须 的方法：创建虚拟DOM

- 只能通过 this.props 和 this.state 访问数据（不能修改）

- 可以返回 null,false 或者任何React组件

- 只能出现一个顶级组件，不能返回一组元素

- 不能改变组件的状态

- 不能修改DOM的输出

render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。react之所以效率高，就是这个原因。

componentDidMount

初始化渲染后只调用一次，这时可以获取相应的DOM节点。

这里可以挂载一些其他的插件之类的，也可以执行异步请求；一般 建议在componentDidMount中异步请求数据

componentWillReceiveProps(nextProps)

初始化渲染不会调用，组件在接受到新的props时调用，nextProps是接受到的新的props，可以通过this.props获取老的props。例如：当父组件传入新的props的时候可以在此做些简单的处理

componentWillReceiveProps(nextProps){
    let params = this.params;
    let nextParams = nextProps.params;
 if (params.sub !== nextParams.sub){
       //简单的逻辑处理
  }

}

shouldComponentWillUpdate

初始化渲染不会调用，接收到新的props或state时调用

componentWillUpdate

初始化渲染不会调用，更新前调用。组件渲染前执行，接受新的props、state或者调用forceUpdate()

componentDidUpdate

初始化渲染不会调用，更新后调用。组件每次渲染都会执行，可以获取相应的DOM节点

componentWillUnmount

组件被卸载的时候调用。
在componentDidMount 中添加的任务都需要在该方法中撤销，如创建的定时器、事件监听器或断开socket
一般在componentDidMount里面注册的事件需要在这里删除

每次使用this.setState 修改state时，会依次调用：

 * shouldComponentUpdate
 * componentWillUpdate
 * render
 * componentDidUpdate

调用setState(setState并不是一个同步的方法，可以理解为异步)后，立刻获取的值，仍然是老值，需要在render的时候才能获取修改后的新值；如果想setState后获取到更新的值，可以放在回调里；比如：

this.setState({
     show:true
},function(){
     console.log(this.state.show) //true
})