热门标签
热门文章
- 1python项目开发——简易图书管理系统_简单通用的图书系统后端管理模板python
- 2【神经网络+数学】——（4）神经网络求解二元偏微分问题（二阶偏微分）_神经网络解偏微分方程的代码
- 3Dynamic Time Warping 动态时间规整算法
- 4我是这么绕过苹果ID锁的_么绕过苹果5s的隐藏id回主页面
- 5华中科技大学计算机学院领导,冯丹：华中科技大学计算机学院院长
- 6ElasticSearch 获取文档的插入时的时间_怎么查看es插入数据时间
- 7软件杯 深度学习YOLOv5车辆颜色识别检测 - python opencv_yolo在执行目标检测时进行颜色检测
- 8根据excel模板导出excel表格 返回流给前端_后端生成excel文件,以流的形式返回给前端
- 9掌握Git：从入门到精通_git提代码命令
- 10转播小助手开启微信语音多群同步直播转播之路_微信小助手多群转播
当前位置: article > 正文
关于React组件中的生命周期_react函数父子组件的生命周期
作者：小桥流水78 | 2024-07-20 15:54:16
赞
踩
react函数父子组件的生命周期
关于React组件中的生命周期
1、理解
- 组件从创建到死亡它会经历一些特定的阶段，生命周期就像一个人的生命一样，它是人从出生到老去的一个过程，在这个过程，我们会在合适的年龄做合适的事情，比如上学，工作等等
- React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
- 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。
2、生命周期流程图（旧）
2.1 组件生命周期
初始化阶段（由ReactDOM.render()触发---初次渲染）：constructor >>> componentWillMount >>> render >>> componentDidMount
更新阶段（由组件内部this.setSate()或父组件重新render触发）：
- setState：
shouldComponentUpdate()>>>componentWillUpdate()>>>render()>>>componentDidUpdate()
注：shouldComponentUpdate类似于一个开关，代码中没写这个生命周期，框架底层在执行的时候也会给你补上一个，而且返回值默认为true，当你写了shouldComponentUpdate这个钩子时，框架要求你必须写个返回值，返回值必须为布尔值，当返回值为true时，可往下执行；当返回值为false时，之后的钩子就都没有机会执行了。
- forceUpdate：
componentWillUpdate()>>>render()>>>componentDidUpdate()
卸载阶段（由ReactDOM.unmountComponentAtNode()触发）：componentWillUnmount()
2.2 父子组件生命周期执行顺序
初始化阶段：父---componentWillMount() >>> 父---render() >>> 子---componentWillMount() >>> 子---render() >>> 子---componentDidMount() >>> 父---componentDidMount()
更新阶段：父---shouldComponentUpdate() >>> 父---componentWillUpdate() >>> 父---render() >>> 子---componentWillReceiveProps() >>> 子---shouldComponentUpdate() >>> 子---componentWillUpdate() >>> 子---render() >>> 子---componentDidUpdate() >>> 父---componentDidUpdate()
卸载阶段：父---componentWillUnmount() >>> 子---componentWillUnmount()
验证代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2_react生命周期(旧)</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/babel.min.js"></script> <script type="text/babel"> /* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. componentWillMount() 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 2. 更新阶段: 由组件内部this.setSate()或父组件render触发 1. shouldComponentUpdate() 2. componentWillUpdate() 3. render() =====> 必须使用的一个 4. componentDidUpdate() 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1. componentWillUnmount() =====> 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息 */ //创建组件 class Count extends React.Component{ //构造器 constructor(props){ console.log('Count---constructor'); super(props) //初始化状态 this.state = {count:0} } //加1按钮的回调 add = ()=>{ //获取原状态 const {count} = this.state //更新状态 this.setState({count:count+1}) } //卸载组件按钮的回调 death = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ this.forceUpdate() } //组件将要挂载的钩子 componentWillMount(){ console.log('Count---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ console.log('Count---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ console.log('Count---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ console.log('Count---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ console.log('Count---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ console.log('Count---componentDidUpdate'); } render(){ console.log('Count---render'); const {count} = this.state return( <div> <h2>当前求和为：{count}</h2> <button onClick={this.add}>点我+1</button> <button onClick={this.death}>卸载组件</button> <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button> </div> ) } } //父组件A class A extends React.Component{ //初始化状态 state = {carName:'奔驰'} changeCar = ()=>{ this.setState({carName:'奥拓'}) } //卸载组件按钮的回调 death = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ this.forceUpdate() } //组件将要挂载的钩子 componentWillMount(){ console.log('父---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ console.log('父---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ console.log('父---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ console.log('父---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ console.log('父---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ console.log('父---componentDidUpdate'); } render(){ console.log('父---render'); return( <div> <div>我是A组件</div> <button onClick={this.changeCar}>换车</button> <button onClick={this.death}>卸载组件</button> <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button> <B carName={this.state.carName}/> </div> ) } } //子组件B class B extends React.Component{ //组件将要接收新的props的钩子 componentWillReceiveProps(props){ console.log('子---componentWillReceiveProps',props); } //组件将要挂载的钩子 componentWillMount(){ console.log('子---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ console.log('子---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ console.log('子---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ console.log('子---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ console.log('子---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ console.log('子---componentDidUpdate'); } render(){ console.log('子---render'); return( <div>我是B组件，接收到的车是:{this.props.carName}</div> ) } } //渲染组件 // ReactDOM.render(<Count/>,document.getElementById('test')) ReactDOM.render(<A/>,document.getElementById('test')) </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
3、生命周期流程图（新）
新增了getDerivedStateFromProps和getSnapshotBeforeUpdate两个钩子
getDerivedStateFromProps(props,state)：
- 相当于componentwillmount 和 componentWillReceiveProps合并
- 主要是应用在于封装组件时调用，组件的state取决于props变化
- 每次render都会调用，无条件的根据 props来更新内部 state，也就是只要有传入 props值， 就更新 state；只有 props 值和 state值不同时才更新 state 值
- 尽量不使用，维护俩者状态需要消耗额外资源，增加复杂度
- 典型场景表单获取默认值
getSnapshotBeforeUpdate(prevProps，prevState)：
- 替换componentWillUpdate函数，将参数返回并传递给componentDidUpdate周期函数
getSnapshotBeforeUpdate()在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给componentDidUpdate(prevProps, prevState, snapshot)。- 典型场景：获取render之前的dom状态
初始化阶段(由ReactDOM.render()触发---初次渲染)：constructor() >>> getDerivedStateFromProps() >>> render() >>> componentDidMount()
更新阶段(由组件内部this.setSate()或父组件重新render触发)：
- setState：
getDerivedStateFromProps()>>>shouldComponentUpdate()>>>render()>>>getSnapshotBeforeUpdate()>>>componentDidUpdate()
- forceUpdate：
getDerivedStateFromProps()>>>render()>>>getSnapshotBeforeUpdate()>>>componentDidUpdate()
卸载阶段(由ReactDOM.unmountComponentAtNode()触发)：componentWillUnmount()
验证代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3_react生命周期(新)</title> </head> <body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --> <script type="text/javascript" src="../js/17.0.1/react.development.js"></script> <!-- 引入react-dom，用于支持react操作DOM --> <script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script> <!-- 引入babel，用于将jsx转为js --> <script type="text/javascript" src="../js/17.0.1/babel.min.js"></script> <script type="text/babel"> //创建组件 class Count extends React.Component{ /* 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1. constructor() 2. getDerivedStateFromProps 3. render() 4. componentDidMount() =====> 常用 一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发 1. getDerivedStateFromProps 2. shouldComponentUpdate() 3. render() 4. getSnapshotBeforeUpdate 5. componentDidUpdate() 3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发 1. componentWillUnmount() =====> 常用 一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息 */ //构造器 constructor(props){ console.log('Count---constructor'); super(props) //初始化状态 this.state = {count:0} } //加1按钮的回调 add = ()=>{ //获取原状态 const {count} = this.state //更新状态 this.setState({count:count+1}) } //卸载组件按钮的回调 death = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ this.forceUpdate() } //若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps static getDerivedStateFromProps(props,state){ console.log('getDerivedStateFromProps',props,state); return null } //在更新之前获取快照 getSnapshotBeforeUpdate(){ console.log('getSnapshotBeforeUpdate'); return 'wwww' } //组件挂载完毕的钩子 componentDidMount(){ console.log('Count---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ console.log('Count---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ console.log('Count---shouldComponentUpdate'); return true } //组件更新完毕的钩子 componentDidUpdate(preProps,preState,snapshotValue){ console.log('Count---componentDidUpdate',preProps,preState,snapshotValue); } render(){ console.log('Count---render'); const {count} = this.state return( <div> <h2>当前求和为：{count}</h2> <button onClick={this.add}>点我+1</button> <button onClick={this.death}>卸载组件</button> <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button> </div> ) } } //渲染组件 ReactDOM.render(<Count count={199}/>,document.getElementById('test')) </script> </body> </html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
4、常用的重要钩子
- render：初始化渲染或更新渲染调用
- componentDidMount：开启监听， 发送ajax请求
- componentWillUnmount：做一些收尾工作, 如: 清理定时器
5、即将废弃的生命钩子
- componentWillMount
- componentWillReceiveProps
- componentWillUpdate
注：由于componentWillMount 、 componentWillReceiveProps 和 componentWillUpdate 这三个生命周期函数有缺陷，16.3版本后需要加上UNSAFE_前缀才能使用，再以后可能会被彻底废弃，不建议使用。
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小桥流水78/article/detail/857525
推荐阅读
相关标签
