组件生命周期
组件 生命周期
2023-09-11 14:16:32 时间
只有类组件才有生命周期
常用钩子函数:
一、创建时的钩子函数
1、constructor
触发时机:组件创建时
作用:初始化state 、为事件处理程序绑定this
2、render
触发时机:渲染时,更新时
作用:渲染此函数的返回值,此时不能操作DOM ,也注意不要调用setState (会导致循环调用)
3、componentDidMount
触发时机:组件挂载完成后
作用:发送网络请求、操作DOM
二、更新时
导致组件更新的情况:
接收到新的 props、setState、forceUpdate
1、render
2、componentDidUpdate
触发时机:组件更新渲染后
作用:发送网络请求、操作DOM。如果想调用setState,需要放在if条件语句中,否则会导致循环调用,if条件一般是比较preProps和this.props的相关内容。
componentDidUpdate(prevProps){
if(prevProps.num !== this.props.num){
//this.setState({})
//发送ajax请求,并setState
//修改DOM
}
}
三、卸载前
1、componentWillUNmount
触发时机:组件卸载前
作用:清理工作,如清除计时器等
一些不常用的:
shouldComponentUpdate 等
相关文章
- Vue 组件开发
- 34 动态组件(切换组件)保存状态input值
- 5 component 编写一个组件
- 程序员常用的组件、框架、开发工具下载链接大全
- taro 填坑之路(二)taro 通过事件监听 实现组件间传值
- Vue - Ant Design Vue表格组件(Table)分页器(Pagination)带搜索条件调用接口进行分页查询
- Flink运行时的组件
- 路由场景下父子组件的生命周期顺序来个刨根问底
- SwiftUI iOS 精品工具条组件之 12 文本与图片混合滚动工具条(教程含源码)
- 复用的基础是组件化与标准化
- 组件实例之$isServer
- Vue中父子组件执行的先后顺序
- Tomcat中组件的生命周期管理公共接口Lifecycle
- css 修改element组件自动生成后的样式