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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

王道计算机网络学习笔记(4)——网络层

前言 文章中的内容来自B站王道考研计算机网络课程&#xff0c;想要完整学习的可以到B站官方看完整版。 四&#xff1a;网络层 ​​​​​​​​​​​​​​在计算机网络中&#xff0c;每一层传输的数据都有不同的名称。 物理层&#xff1a;传输的数据称为比特&#xff08;Bi…

字节跳动面试挂在2面,复盘后,决定二战.....

先说下我基本情况&#xff0c;本科不是计算机专业&#xff0c;现在是学通信&#xff0c;然后做图像处理&#xff0c;可能面试官看我不是科班出身没有问太多计算机相关的问题&#xff0c;因为第一次找工作&#xff0c;字节的游戏专场又是最早开始的&#xff0c;就投递了&#xf…

OpenCv色彩空间

目录 一、RGB 二、图像处理入门 三、色彩空间的转换 一、RGB 在表示图像时&#xff0c;有多种不同的颜色模型&#xff0c;但最常见的是红、绿、蓝(RGB) 模型RGB 模型是一种加法颜色模型&#xff0c;其中原色 (在RGB模型中&#xff0c;原色是红色 R、绿色 G 和蓝色 B)混合在…

青岛大学_王卓老师【数据结构与算法】Week05_08_顺序栈的操作2_学习笔记

本文是个人学习笔记&#xff0c;素材来自青岛大学王卓老师的教学视频。 一方面用于学习记录与分享&#xff0c; 另一方面是想让更多的人看到这么好的《数据结构与算法》的学习视频。 如有侵权&#xff0c;请留言作删文处理。 课程视频链接&#xff1a; 数据结构与算法基础…

【C++初阶】list的模拟实现 附源码

一.list介绍 list底层是一个双向带头循环链表&#xff0c;这个我们以前用C语言模拟实现过&#xff0c;->双向带头循环链表 下面是list的文档介绍&#xff1a; list文档介绍 我们会根据 list 的文档来模拟实现 list 的增删查改及其它接口。 二.list模拟实现思路 既然是用C模拟…

HDFS Hadoop分布式文件存储系统整体概述

HDFS 整体概述举例&#xff1a; 包括机架 rack1、rack2 包括5个Datanode,一个Namenode(主角色)带领5个Datanode(从角色)&#xff0c;每一个rack中包含不同的block模块文件为分块存储模式。块与块之间通过replication进行副本备份&#xff0c;进行冗余存储&#xff0c;Namenode…

基于Nonconvex规划的配电网重构研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

数仓学习---8、数仓开发之ODS层

星光下的赶路人star的个人主页 大鹏一日同风起&#xff0c;扶摇直上九万里 文章目录 一、数仓开发之ODS层1.1 日志表1.2 业务表1.2.1 活动信息表&#xff08;全量表&#xff09;1.2.2 活动规则表&#xff08;全量表&#xff09;1.2.3 一级品类表&#xff08;全量表&#xff09;…

Docker基础(二)

1、Docker工作原理 Docker是一个Clinet-Server结构的系统&#xff0c;Docker守护进程运行在主机上&#xff0c;然后通过Socket连接从客户端访问&#xff0c;守护进程从客户端接受命令并管理运行在主机上的容器。 容器&#xff0c;是一个运行时环境&#xff0c;就是我们前面说的…

Linux6.1 Docker 基本管理

文章目录 计算机系统5G云计算第四章 LINUX Docker 基本管理一、Docker 概述1.概述2.Docker与虚拟机的区别3.容器在内核中支持2种重要技术4.Docker核心概念1&#xff09;镜像2&#xff09;容器3&#xff09;仓库 二、安装 Docker三、Docker 镜像操作四、Docker 容器操作 计算机系…

【软件测试面试】腾讯数据平台笔试题-接口-自动化-数据库

数据库题 答案&#xff1a; Python编程题 答案&#xff1a; 接口参数化题 答案&#xff1a; 接口自动化题 答案&#xff1a; 以下是我收集到的比较好的学习教程资源&#xff0c;虽然不是什么很值钱的东西&#xff0c;如果你刚好需要&#xff0c;可以评论区&#…

家政小程序开发-H5+小程序

移动互联网的发展&#xff0c;微信小程序逐渐成为商家拓展线上业务的重要手段。家政服务作为日常生活中不可或缺的一部分&#xff0c;也开始尝试通过小程序来提高服务质量和效率。 下面是一篇关于家政小程序开发的H5小程序的文章&#xff0c;希望对您有所帮助。 家政服…

Spring Cloud 远程接口调用OpenFeign负载均衡实现原理详解

环境&#xff1a;Spring Cloud 2021.0.7 Spring Boot 2.7.12 配置依赖 maven依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId> </dependency> <dependency&…

未来Mac下载站怎么打不开了

重要公告&#xff1a; 未来软件园因业务需要现更换域名 原域名&#xff1a;Mac.orsoon.com 更为新域名&#xff1a;未来mac下载-Mac软件-mac软件下载-mac软件大全 程序已全面转移&#xff0c;请访问新域名

tauri自定义窗口window并实现拖拽和阴影效果

需求说明 由于官方提供的窗口标题并不能实现我的需求&#xff0c;不能很好的实现主题切换的功能&#xff0c;所以根据官方文档实现了一个自定义的窗口&#xff0c;官方文档地址&#xff1a;Window Customization | Tauri Apps 但是实现之后&#xff0c; 没有了窗体拖拽移动的…

第四章Shell编程之正则表达式与文本处理器

文本处理有三剑客&#xff1a;grep sed awk 通配符&#xff1a;只能匹配文件名与目录名&#xff0c;不能匹配文件的内容 *匹配任意一个或者多个字符 &#xff1f;匹配任意一个字符&#xff08;就是匹配单个字符&#xff09; [ ] 匹配范围内的任意单个字符 正则表达式&…

ONNX 推理,精度下降

先看代码&#xff1a; img cv2.imread("65.jpg") img1 img.copy() img2 img.copy() img1 - 112 img1 img1.astype(np.float32) img2 np.float32(img2) img2 - 112 现象&#xff1a;在使用 img1 这种处理方式时&#xff0c;推理结果异常&#xff0c;起码掉点…

AUTOSAR CP标准的RTE和BSW各模块的设计及开发工作

AUTOSAR&#xff08;Automotive Open System Architecture&#xff09;是一种开放的汽车电子系统架构标准&#xff0c;旨在提供一种统一的软件架构&#xff0c;以实现汽车电子系统的模块化和可重用性。 AUTOSAR标准中的两个重要模块是RTE&#xff08;Runtime Environment&…

智能优化算法——灰狼优化算法(PythonMatlab实现)

目录 1 灰狼优化算法基本思想 2 灰狼捕食猎物过程 2.1 社会等级分层 2.2 包围猎物 2.3 狩猎 2.4 攻击猎物 2.5 寻找猎物 3 实现步骤及程序框图 3.1 步骤 3.2 程序框图 4 Python代码实现 5 Matlab实现 1 灰狼优化算法基本思想 灰狼优化算法是一种群智能优化算法&#xff0c;它的…

【已解决】ModuleNotFoundError: No module named ‘timm.models.layers.helpers‘

文章目录 错误信息原因解决方法专栏&#xff1a;神经网络精讲与实战AlexNetVGGNetGoogLeNetInception V2——V4ResNetDenseNet 错误信息 在使用timm库的时候出现了ModuleNotFoundError: No module named timm.models.layers.helpers’的错误&#xff0c;详情如下&#xff1a; …