【React -- 4/100】 生命周期
2024-09-04 04:59:49
生命周期
概述
意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等
组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程
生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数
构造函数的作用：为开发人员在不同阶段操作组件提供了实际
组件生命周期的三个阶段
1 - 创建时（挂载阶段）
执行时机： 组件创建时（页面加载时）
执行顺序: constructor() --> render() --> componentDidMount()
生命周期钩子函数：
constructor()
初始化state
为事件处理程序绑定this
render()
渲染UI
componentDidMount()
进行DOM操作
发送ajax请求
2、 运行阶段
触发组件更新的三种情况
执行条件：
1、setState()
2、forceUpdata()
3、组件接收到新的props
render() --> componentDidMount()
组件更新
componentDidUpdate()
拿到上一次的props -- ： prevProps
拿到这一次的props -- ： this.props
3、卸载阶段
钩子函数：
componentWillUnmount
执行清理工作，防止内存泄漏
getDerivedStateFromProps()`
- getDerivedStateFromProps 会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
- 不管原因是什么，都会在每次渲染前触发此方法
shouldComponentUpdate()
- 根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染
- 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true
getSnapshotBeforeUpdate()
- getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
- 此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等
class Parent extends React.Component {
constructor() {
console.log( ' constructor ');
super();
this.state = {
count: 0
}
}
handleClick = () => {
this.setState({
count: this.state.count + 1
})
};
componentDidMount() {
console.log('componentDidMount');
}
render() {
console.log( ' render ')
return (
<div>
{/!* 调用子组件， 传递参数给子组件*!/}
{
this.state.count >= 3 ?
<p>over</p> :
<Child count={this.state.count} />
}
<button onClick={this.handleClick}>click + 1</button>
</div>
)
}
}
class Child extends React.Component {
componentDidMount() {
// 设置定时器
this.timerID = setInterval(() => {
console.log('定时炸弹开始')
}, 500)
}
componentWillUnmount() {
console.log('卸载组件钩子函数');
// 清除定时器 不清理会造成内存泄漏
clearInterval(this.timerID)
}
render() {
console.log( 'child render 钩子函数')
return (
<div>
<p>count: {this.props.count}</p>
</div>
)
}
}
ReactDOM.render(<Parent/>, document.getElementById('root'))
最新文章
- exp
- MyBatis入门学习（一）
- git（4）如何在windows上安装git
- ListView中EditText的数据加载错乱的问题
- 【Java学习笔记】函数使用
- 【memset】关于memset的初始最大最小值
- IOS开发中单例模式使用详解
- OD调试学习笔记7—去除未注册版软件的使用次数限制
- Sublime 学习记录（二） package control 组件
- sqlplus登录问题
- mybatis介绍与环境搭建
- 史考特证券(Scottrade)填写提款申请表的要求以及注意事项
- Inception体验之安装
- fiddler和手机连接抓包实现
- 如何解决Failed to retrieve MSVC Environment from XXXXXXXX
- VsCode源码分析之布局
- 初次认识：Transfer-Encoding: chunked
- 02MySQL中的数据类型
- mvc 缓存 sqlCacheDependency 监听数据变化
- AJAX之发送GET请求