组件生命周期概述
1.初始化
在组件初始化阶段会执行
constructor
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()
注意：这些方法被认为是遗留的，您应该在新代码中避免它们：
2.更新阶段
props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：
componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
注意：这些方法被认为是遗留的，您应该在新代码中避免它们：
3.卸载阶段
- componentWillUnmount()
错误处理
在渲染期间，生命周期方法或任何子组件的构造函数中发生错误时，将调用这些方法。
4.错误处理
- componentDidCatch()
改变之前应该使用的是～～～
componentWillReceiveProps(nextProps){
// 销量开关
if (this.props.salesStatus !== nextProps.salesStatus) {
this.setState({ salesStatus: nextProps.salesStatus });
}
// 营业开关
if (this.props.openStatus !== nextProps.openStatus) {
this.setState({
openStatus: nextProps.openStatus,
});
}
经过反映旧版本的componentWillReceiveProps是不安全的，我们必须使用，getDerivedStateFromProps。
改版后～～～
componentDidMount() {
const something = ClassComponentName.runThisFunction();
this.setState({ updatedSomething: something });
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.key !== prevState.key) {
return {
updatedSomething: ClassComponentName.runThisFunction()
};
}
return null;
}
funThisFunction() {
//do stuff and return value
}
简单来说就是：
每次渲染组件时都会调用getDerivedStateFromProps。在旧版本中，getDerivedStateFromProps只会在props更新是执行而并且不会因组件setState而触发。FB指出这是最初实施过程中的疏忽，现在已经得到纠正。
所以，在16.4版本中，组件执行setState时也会触发getDerivedStateFromProps。
关于React生命周期-->戳它 react关于生命周期的官方文档。
