【React】第六部分 生命周期
6. 生命周期
6.1 什么是生命周期
-
组件从创建到死亡它会经历一些特定的阶段。
-
React组件中包含一系列钩子函数(生命周期回调函数), 会在特定的时刻调用。
-
我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
6.2 生命周期流程图（旧）
初始化阶段
由ReactDOM.render()触发 -- 初次渲染
- constructor（） 构造器函数
- componentWillMount（）组件将要被挂载
- render（） 页面渲染
- componentDidMount（）组件挂载完毕
- componentWillUnmount（） 组件将要被卸载
更新阶段
由组件内部this.setState()或者是父组件重新render触发
- shouldComponentUpdate（） 开启更新（相当于一个开关）
- componentWillUpdate（） 组件将要更新
- render（）页面渲染
- componentDidUpdate（）组件更新完毕
- componentWillUnmount（） 组件将要被卸载
强制更新阶段
由组件内部this.forceUpdate()强制更新
- render（）页面渲染
- componentDidUpdate（）组件更新完毕
- componentWillUnmount（） 组件将要被卸载
卸载组件
由ReactDOM.unmountComponentAtNode()触发卸载组件
- componentWillUnmount（） 组件将要被卸载
6.3 生命周期流程图（新）
注意：
废弃3个钩子
-
componentWillMount 组件将要被挂载
-
componentWillReceiveProps 组件将要接收参数
-
componentWillUpdate 组件将要被更新
新增2个钩子（想要了解更多可以移至官网）新增的2个钩子官方也表示用的地方很少
-
getDerivedStateFromProps
-
getSnapshotBeforeUpdate
初始化阶段
由ReactDOM.render() 触发---初次渲染
-
constructor（） 构造器函数
-
getDerivedStateFromProps （）
-
render（） 页面渲染
-
componentDidMount（） 组件挂载完毕
-
componentWillUnmount（）组件将要被卸载
更新阶段
由组件内部this.setSate()或父组件重新render触发或者组件内部this.forceUpdate()
-
getDerivedStateFromProps（）
-
shouldComponentUpdate（） 开启更新
-
render（） 页面渲染
-
getSnapshotBeforeUpdate（）
-
componentDidUpdate（）更新完毕
-
componentWillUnmount（）组件将要被卸载
卸载组件
由ReactDOM.unmountComponentAtNode()触发卸载组件
- componentWillUnmount（） 组件将要被卸载
6.4 总结新旧生命周期
其实最重要最常用的钩子，在新旧生命周期中都没有发生变化
-
render：初始化渲染或更新渲染调用
-
componentDidMount：一般用于开启监听, 发送ajax请求
-
componentWillUnmount：一般用于做一些收尾工作, 如: 清理定时器
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/82865.html
