生命周期
1. getDefaultProps
作用于组件类,只调用一次,返回对象用于设置默认的props,对于引用值,会在实例中共享。
2. getInitialState
作用于组件的实例,在实例创建时调用一次,用于初始化每个实例的state,此时可以访问this.props。
// 其中getDefaultProps和getInitialState 对应在ES6中也就是在 constructor构造方法中的初始化属性与状态。
3. componentWillMount
在渲染前调用,在客户端也在服务端。
4. componentDidMount
在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。
如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。
5. getDerivedStateFromProps 代替 componentWillReceiveProps(nextProps)
// 16.3之后不推荐使用componentWillReceiveProps 改用UNSAFE_componentWillReceiveProps 替代
在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
6. shouldComponentUpdate(nextProps, nextState)
返回一个布尔值。在组件接收到新的props或者state时被调用。
在初始化时或者使用forceUpdate时不被调用。 可以在你确认不需要更新组件时使用。
7. getSnapshotBeforeUpdate 代替 componentWillUpdate(nextProps, nextState)
// UNSAFE_componentWillUpdate 替代
在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
8. componentDidUpdate
在组件完成更新后立即调用。在初始化时不会被调用。
9. ReactElement render()
10. componentWillUnmount
在组件从 DOM 中移除的时候立刻被调用。
实例化
实例化完成后的更新
这些方法会在组件实例被创建和插入DOM时被调用
- constructor
- componentWillMount
- render
- componentDidMount
更新
- 属性或状态的改变会触发一次更新,当一个组件被重新渲染时,这些方法会被调用*
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
销毁&清理期
当一个组件被从DOM中移除时,该方法被调用
- componentWillUnmount()