一.对比新旧生命周期函数
与旧生命周期函数相比,新的生命周期函数废弃了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){
该钩子函数可以接收三个参数
}
四.总结
-
初始化阶段:由ReactDOM.render()触发----初次渲染
(1) constructor()
(2) getDerivedSateFromProps
(3) render()
(4) componentDidMount() ===> 常用,一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、开启订阅 -
更新阶段,由组件内部this.setState()或父组件调用render触发
(1) getDerivedSateFromProps
(2) shouldComponentUpdate()
(3) render() ===> 必须使用一个
(4) getSnapshotBeforeUpdate
(4) componentDidUpdate() -
卸载组件,由ReactDOM.unmountComponentAtNode()触发
(1) componentWillUnmount() ===> 常用,一般在这个钩子中做一些收尾的事,例如:关闭定时器、取消订阅消息