一、理解
-组件从创建到死亡它会经历一些特定的阶段
-React组件中包含一系列钩子函数(生命周期回调函数),会在特定的时刻调用
-我们在定义组件时,会在特定的生命周期回调函数,中做特定的工作
二、新版和旧版生命周期
旧版本:
A、初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount() ===>常用
一般在这个钩子做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息
B、更新阶段: 由组件内部this.setSate()或(父组件重新render触->componentWillReceiveProps)
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render() 必须用
4.componentDidUpdate()
C、卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1.componentWillUnmount() ==>常用
一般在这个钩子做一些收尾的事,例如:关闭定时器,取消订阅消息
旧版本:
生命周期的三个阶段(新)
A.初始化阶段: 由ReactDOM.render()触发---初次渲染
1.constructor()
2.getDerivedStateFromProps
3.render()
4.componentDidMount()
B.更新阶段:由组件内部this.setSate()或父组件重新render触发
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()
C.卸载组件:由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()
三、总结一下:
重要的勾子:
1. render:初始化渲染或更新渲染调用
2. componentDidMount:开启监听, 发送ajax请求
3. componentWillUnmount:做一些收尾工作, 如: 清理定时器
即将废弃的勾子:
1. componentWillMount
2. componentWillReceiveProps
3. componentWillUpdate
4.现在使用会出现警告,下一个大版本需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用。