生命周期
参考:http://wiki.jikexueyuan.com/project/react/component-specs-lifecycle.html
| 生命周期 | API | 说明 | 备注 |
|---|---|---|---|
| 挂载 | componentWillMount | 组件初始化渲染之前立刻调用 | 只调用一次 |
| 挂载 | componentDidMount | 组件初始化渲染后立刻调用 | 只调用一次 |
| 更新 | comcponentWillReceiveProps | 在组件接收到新的props的时候调用 |
初始化渲染时不会调用 |
| 更新 | shouldComponentUpdate | 在接收到新的props或者 state，将要渲染之前调用。 |
初始化渲染时不会调用 |
| 更新 | componentWillUpdate | 在接收到新的props或者state之前立刻调用 |
初始化渲染时不会调用 |
| 更新 | componentDidUpdate | 在组件的更新已经同步到 DOM 中之后立刻被调用 | 初始化渲染时不会调用 |
| 移除 | componentWillUnmount | 在组件从 DOM 中移除的时候立刻被调用。 | 在该方法中执行任何必要的清理，比如无效的定时器 |
componentWillUpdate
当组件收到新的props或者state，在render之前会回调该函数。
注意不能在该方法中使用 this.setState()，否则会导致无限循环。如果需要在收到新的prop后更新state，应该使用 componentWillReceiveProps 方法，在该方法中使用this.setState()不会触发组件重新渲染。
componentDidUpdate
可以在该方法中使用this.setState()
如果在该方法中使用 this.setState()会更新该组件，更新组件的同时又会触发componentDidUpdate从而重复调用this.setState()，这会导致无限循环。
正确的做法是加入一个终止条件，使得在调用过程中能正确退出
componentDidUpdate: function() {
if(condition) {
this.setState({..})
} else {
//do something else
}
}
setState方法详解
-
setState方法是异步的并且为了获得更好的性能会进行批量更新,进行setState()操作后state变化不会马上反映到this.state上，所以通过this.state获得的可能还是原来的值。如果想要确保state变化后执行某些操作可以使用setState提供的回调函数setState({...}, function(){}) -
setState使用异步操作是因为JS是单线程语言，而更新state是一种比较昂贵的操作，若进行同步操作会导致浏览器卡顿用户体验变差，因此setState采用异步批量更新。 - 若要确保
state确实被更新后执行某些操作那么应该使用setState的回调函数
this.setState({...}, function(){
...
})
