React生命周期分为装载、更新、卸载、异常捕获
装载(Mounting)
组件被插入到DOM中
-
getDefaultProps()
声明默认的属性，ES6之前是这样
var Greeting = createReactClass({
getDefaultProps: function() {
return {
name: 'Mary'
};
},
// ...
});
ES6是这样
class Greeting extends React.Component {
// ...
}
Greeting.defaultProps = {
name: 'Mary'
};
getInitialState()
初始化state，ES6是constructor()componentWillMount()
render()
componentDidMount()
客户端有这步，而服务端则没有
更新(Updating)
组件重新渲染以更新DOM(state或props变化触发)
-
componentWillReceiveProps(nextProps)
state变化可能不会触发它，因为state变化不一定组件的props变化
nextProps为新接收到的属性 -
shouldComponentUpdate()
返回true才会触发下面的componentWillUpdate、render、componentDidUpdate函数，false则不会 - componentWillUpdate()
- render()
- componentDidUpdate()
卸载(Unmounting)
- componentWillUnmount()
异常捕获(Error handling)
- componentDidCatch()
图表总结
| 生命周期 | 调用次数 | 能否使用 setSate() |
|---|---|---|
| getDefaultProps | 1(全局调用一次) | 否 |
| getInitialState | 1 | 否 |
| componentWillMount | 1 | 是 |
| render | >=1 | 否 |
| componentDidMount | 1 | 是 |
| componentWillReceiveProps | >=0 | 是 |
| shouldComponentUpdate | >=0 | 否 |
| componentWillUpdate | >=0 | 否 |
| componentDidUpdate | 1 | 否 |
