理解与运用React中的生命周期方法与钩子函数
最编程
2024-02-11 21:59:34
...
概念
组件从被创建到挂载到页面中运行,再到组件不用时卸载的过程。
只有类组件才有生命周期。
分为三个阶段:
- 挂载阶段
- 更新阶段
- 销毁阶段
三个阶段
挂载阶段
钩子函数 - constructor
创建阶段触发
作用:创建数据
- 之前定义状态是简写,完整写法是写在constructor函数中
- 包括props之前也是简写,完整写法是写在constructor函数中
- 包括ref【获取真实DOM元素/获取类组件实例】的创建,也要写在constructor函数中
class Son extends Component {
constructor(props) {
// 【创建阶段,目的是创建数据】最先执行
super()
this.state = {
b: props.a,
}
this.iptRef = createRef()
}
// iptRef = createRef() // 建立ref的简写
}
钩子函数 - render
渲染阶段触发 (每次组建渲染都会触发)
作用:渲染UI
⚠️ 注意 :不能调用setState() 原因是render是每次组件渲染时触发的,如果在里面凋setState(),则组件数据发生变化,肯定要重新渲染,但是重新渲染又会触发render。就会形成死循环!!!
render() {
return (
<>
hi :{this.state.b}
<input type="text" ref={this.iptRef} />
</>
)
// return <>hi :{this.props.a}</> // props的简写
}
钩子函数 - componentDidMount
完成DOM渲染后触发
作用:发送请求;DOM操作
componentDidMount() {
// 【组建挂载完毕,目的是:发送请求;DOM操作】完成DOM渲染后触发
console.log('componentDidMount')
}
执行顺序
class App extends Component {
// 挂载阶段,会经过三个钩子:constructor render componentDidMount
constructor() {
// 【创建阶段,目的是创建数据】最先执行
super()
console.log('constructor')
}
render() {
// 【渲染阶段,目的是渲染UI】每次组建渲染都会触发,(注意⚠️ :不能调用setState()原因是render是每次组件渲染时触发的,如果在里面凋setState(),则组件数据发生变化,肯定要重新渲染,但是重新渲染又会触发render。就会形成死循环!!!)
console.log('render')
return (
<>
</>
)
}
componentDidMount() {
// 【组建挂载完毕,目的是:发送请求;DOM操作】完成DOM渲染后触发
console.log('componentDidMount')
}
}
更新阶段
更新含义:数据发生变化就会引起组件的更新
钩子函数 - render()
每次组件重新渲染(数据发生变化)执行
- 默认挂载阶段会执行一次
- 更新阶段执行
- 调用了setState方法
- forceUpdate(强制更新)
- props传递的数据更新了
钩子函数 - componentDidUpdate()
- 更新阶段执行
- 调用了setState方法
- forceUpdate(强制更新)
- props传递的数据更新了
⚠️ 注意 :不能调用setState() 理由同render
import React, { Component } from 'react'
import ReactDOM from 'react-dom/client'
export default class App extends Component {
// 挂载阶段,会经过三个钩子:constructor render componentDidMount
constructor() {
// 【创建阶段,目的是创建数据】最先执行
super()
this.state = {
a: 100,
b: 50,
}
console.log('constructor')
}
handelChange = () => {
this.setState({
a: this.state.a + 1,
})
this.state.b += 1
this.forceUpdate() // 强更新(强制DOM更新) 如果不调用这个方法,b的数据会变化,但是,DOM无法更新
console.log(this.state.b)
}
render() {
console.log('render')
return (
<>
<div>
{this.state.a} --- {this.state.b}
</div>
<button onClick={this.handelChange}>修改</button>
</>
)
}
componentDidMount() {
// 【组件挂载完毕,目的是:发送请求;DOM操作】完成DOM渲染后触发
console.log('componentDidMount')
}
componentDidUpdate() {
// 【组件更新完毕】
console.log('componentDidUpdate')
}
}
ReactDOM.createRoot(document.querySelector('#root')).render(<App></App>)
卸载阶段
钩子函数 - componentWillUnmount()
import React, { Component } from 'react'
let timer = -1
export default class Son extends Component {
constructor() {
super()
console.log(' Son子组件的constructor')
timer = setInterval(() => {
console.log('定时器执行')
}, 1000)
}
render() {
console.log('Son子组件的render')
return <div>Son</div>
}
componentDidMount() {
console.log('Son子组件的componentDidMount')
}
componentDidUpdate() {
console.log('Son子组件的componentDidUpdate')
}
// 【组件卸载,执行一些清理工作】组件即将销毁的时候,要将全局的定时任务,全局变量,全局...等等销毁
componentWillUnmount() {
clearInterval(timer)
console.log('Son子组件销毁了componentWillUnmount')
}
}
父子组件的钩子函数执行顺序
父组件constructor → 父组件的render → 子组件的constructor → 子组件的render → 子组件的componentDidMount → 父组件的componentDidMount
上一篇: 钩子函数
推荐阅读
-
理解并实际运用React中的新特性:getDerivedStateFromProps生命周期钩子
-
理解和运用 Kotlin 中的函数与对象
-
在Python中理解self与类方法的递归运用
-
深度学习中的不确定性量化:2020年实用技术与应用大解析 - 61页精华解读" 这份报告深入剖析了近年来深度学习领域中不确定性量化(UQ)技术的最新发展,包括其在强化学习(RL)中的运用实例。探讨了贝叶斯近似和集成学习等主流UQ方法在各个具体场景中的广泛应用,比如自动驾驶、目标识别、图像修复、医疗影像分析(如分类和分割)、文本理解(如文本分类和风险评估)、以及生物信息学等多个领域。 报告进一步梳理了UQ方法在深度学习领域的关键应用案例,并针对当前面临的挑战及未来研究方向进行了概览和展望,为这一领域的研究人员和实践者提供了有价值的参考指南。
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。
-
理解与运用React中的生命周期方法与钩子函数
-
理解HTTP方法(GET/POST)与g Hook函数的运用
-
Vue 框架中,深入理解生命周期钩子函数的剖析与详解
-
在Java中实现钩子函数的简易理解与应用
-
南邮OJ Web任务大揭秘:层层挑战剖析 1. 挑战一:迷宫般的目录探索 题目作者似乎穷举了所有可能的目录组合,最终在404.php中的