React学习--生命周期函数（新）

一.对比新旧生命周期函数

与旧生命周期函数相比，新的生命周期函数废弃了3个生命周期钩子，新增了2个生命周期钩子

废弃的3个钩子函数：componentWillMount, componentWillReceiveProps, componentWillUpdate
如果目前想在新版本中使用上述3个钩子函数，需要加UNSAFE_前缀，例如UNSAFE_componentWillMount

新增2个钩子函数：getDerivedStateFromProps, getSnapshotBeforeUpdate

二.getDerivedStateFromProps

该生命周期钩子使用时要使用静态方法

static getDerivedStateFromProps(props){
   
	return 状态对象/null
}

该钩子函数必须返回一个状态对象/null。当state的值在任何情况下都取决于props时，可以使用该函数

三.getSnapshotBeforeUpdate

在更新之前获取快照，必须要有返回值，该返回值可以为快照值（任意类型）也可以为null，返回值将作为componentDidUpdate的第三个参数

getSnapshotBeforeUpdate(){
   
	return 1
}
componentDidUpdate(prevProps,prevState,snapshotValue){
   
	该钩子函数可以接收三个参数
}

四.总结

1. 初始化阶段：由ReactDOM.render()触发----初次渲染
   (1) constructor()
   (2) getDerivedSateFromProps
   (3) render()
   (4) componentDidMount() ===> 常用，一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、开启订阅

2. 更新阶段，由组件内部this.setState()或父组件调用render触发
   (1) getDerivedSateFromProps
   (2) shouldComponentUpdate()
   (3) render() ===> 必须使用一个
   (4) getSnapshotBeforeUpdate
   (4) componentDidUpdate()

3. 卸载组件，由ReactDOM.unmountComponentAtNode()触发
   (1) componentWillUnmount() ===> 常用，一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息