React和Vue生命周期

主要就是命名不同

目录

React

组件挂载

挂载前constructor()

挂载时render()

挂载后componentDidMount():初始化节点

更新

更新时render():prop/state改变

更新后componentDidUpdate()

卸载

卸载前componentWillUnmount():清理

Vue

初始阶段:beforeCreate、created、beforeMount、mounted

更新阶段:beforeUpdate、updated

销毁阶段:beforeUnmout、unmounted


React

组件挂载

挂载前constructor()

如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数

挂载时render()

class 组件中唯一必须实现的方法。

挂载后componentDidMount():初始化节点

组件(插入 DOM 树中)立即调用。依赖于 DOM 节点的初始化应该放在这里。

更新

更新时render():prop/state改变

它只有在 prop 或state发生变化时才可能更新和重新渲染

更新后componentDidUpdate()

首次渲染不会执行此方法。

卸载

卸载前componentWillUnmount():清理

在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作,例如,清除 timer,取消网络请求或清除在 componentDidMount() 中创建的订阅等。

class Welcome extends React.Component {state = {msg: 'hello world'}constructor(props){super(props);console.log('constructor');}componentDidMount = () => {// react中发起ajax请求的初始操作,在这个钩子中完成console.log('componentDidMount');}componentDidUpdate = () => {// 等DOM更新后触发的钩子console.log('componentDidUpdate');}componentWillUnmount = () => {console.log('componentWillUnmount');}handleClick = () => {  /* this.setState({msg: 'hi react'}); *///this.forceUpdate();root.unmount();   // 触发卸载组件}render(){console.log('render');return (<div><button onClick={this.handleClick}>点击</button>{ this.state.msg }</div>);}
}

Vue

初始阶段:beforeCreate、created、beforeMount、mounted

一般在,created,mounted中都可以发送数据请求,但是,大部分时候,会在created发送请求。因为这样可以更短的时间去响应数据。

更新阶段:beforeUpdate、updated

销毁阶段:beforeUnmout、unmounted

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/29819.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Microsoft Outlook如何定时发送邮件

点击New Emai 选择Options→Delay Delivery→Do not deliver before→Close

MySQL(六)主从复制

MySQL系列文章 MySQL&#xff08;一&#xff09;基本架构、SQL语句操作、试图 MySQL&#xff08;二&#xff09;索引原理以及优化 MySQL&#xff08;三&#xff09;SQL优化、Buffer pool、Change buffer MySQL&#xff08;四&#xff09;事务原理及分析 MySQL&#xff08;五&a…

HTML+CSS+JavaScript:渲染柱形统计图

一、需求 用户输入四个季度的数据&#xff0c;根据数据生成柱形统计图&#xff0c;浏览器预览效果如下 二、完整代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content&q…

Jenkins | 获取凭证密码

目录 方法一&#xff1a;查看所有账号及密码 方法二&#xff1a;查看指定账号密码 方法一&#xff1a;查看所有账号及密码 Jenkins > 系统管理 > 脚本命令行 com.cloudbees.plugins.credentials.SystemCredentialsProvider.getInstance().getCredentials().forEach{i…

VoIP监控工具有什么作用

VoIP 监控工具利用思科的 IPSLA 技术生成合成流量并监控客户端体验的呼叫质量。与被动监控VoIP指标相反&#xff0c;IPSLA技术允许IT管理员主动并在潜在问题发生之前检测到它们&#xff0c;这使组织能够轻松遵守严格的SLA指标。 思科 IPSLA 技术在两台设备之间创建流量&#x…

gd32f103vbt6 串口OTA升级3-linux端的部分

一. 简介 本文主要是对linux端升级单片机程序的功能部分做一些介绍&#xff0c;包括一些软件流程。 二.硬件部分 2.1 rk3399cpugd32f103 2.2 连接方式&#xff1a;串口&#xff08;115200&#xff0c;8N1&#xff09;或者iic&#xff08;本文没有介绍iic&#xff09; 三、其…

linux下一个iic驱动(按键+点灯)-互斥

一、前提&#xff1a; 硬件部分&#xff1a; 1. rk3399开发板&#xff0c;其中的某一路iic&#xff0c;这个作为总线的主控制器 2. gd32单片机&#xff0c;其中的某一路iic&#xff0c;从设备。主要是按键上报和灯的亮灭控制。&#xff08;按键大约30个&#xff0c;灯在键的…

Appium+python自动化(十二)- Android UIAutomator终极定位凶器(超详解)

简介 乍眼一看&#xff0c;小伙伴们觉得这部分其实在异性兄弟那里就做过介绍和分享了&#xff0c;其实不然&#xff0c;上次介绍和分享的大哥是uiautomatorviewer&#xff0c;是一款定位工具。今天介绍的是一个java库&#xff0c;提供执行自动化测试的各种API。 Android团队在4…

供应链管理系统有哪些?

1万字干货分享&#xff0c;国内外 20款 供应链管理软件都给你讲的明明白白。如果你还不知道怎么选择&#xff0c;一定要翻到第三大段&#xff0c;这里我将会通过8年的软件产品选型经验告诉你&#xff0c;怎么样才能快速选到适合自己的软件工具。 &#xff08;为防后续找不到&a…

2023护网面试题200道(附答案)

最近日入1000的护网行动已经开始摇人了&#xff0c; 不少大学生在后台私信我如何参加护网、面试问些什么、有没有护网内推 作为一个负责任的博主&#xff0c;收到大家反馈的我&#xff0c;连夜发动钞能力&#xff0c;收集整理了一套护网蓝初面试文档 1. 什么是DDoS攻击&#x…

解决appium-doctor报 bundletool.jar cannot be found

一、下载bundletool.jar 下载地址&#xff1a;https://github.com/google/bundletool/releases 二、重命名 重命名这个jar包为bundletool.jar&#xff0c;在android sdk目录下&#xff0c;新建bundle-tool目录&#xff0c;把bundletool.jar包放入其中。 三、配置环境 path后追加…

docker基础1——架构组成、安装配置

文章目录 一、发展起源1.1 传统虚拟化与容器虚拟化1.2 docker底层核心技术1.2.1 命名空间1.2.2 控制组 1.3 docker工作方式1.4 docker容器编排1.5 docker优劣势1.6 docker架构组成 二、yum安装docker三、配置docker加速器 一、发展起源 背景了解&#xff1a; 容器是内核里的一项…