当前位置: 首页 > news >正文

React 对比class与Effect Hook优化响应式数据更新监听,感受useEffect真正的强大

还是之前写过的一个组件

import React from "react"export default class index extends React.Component{constructor(props){super(props);this.state = {name: "小猫猫"}}componentDidMount = ()=>{document.title = this.state.name;}componentDidUpdate() {document.title = this.state.name;}render(){return (<div>Hello World<button onClick= { ()=>{ this.setState({ name: "大猫猫" }) } }>更改title</button></div>)}
}

我们通过 componentDidMount 在页面加载完毕时 将state中的name属性 写入到页面title标签中
在这里插入图片描述
显然运行时 已经没有问题
然后 我们通过给 更改title 这个按钮添加点击事件 然后 更改state下的name的值 因为我们直接这样改 title他是无法触发数据相应去给他改的 所以 我们要通过componentDidUpdate 生命周期去监听 如果响应式数据更改了 再将他写入title
但是 显然 这样 万一 我们改的是其他数据 那么 他依旧会执行这个 将name写入title的逻辑 非常不友好

我们可以更改组件代码如下

import React from "react"export default class index extends React.Component{constructor(props){super(props);this.state = {name: "小猫猫",cont: 1}}componentDidMount = ()=>{document.title = this.state.name;}componentDidUpdate(props,state) {if(state.name !== this.state.name){document.title = this.state.name;console.log("state.name",state.name);console.log("this.state.name",this.state.name);console.log("触发");}}render(){return (<div>Hello World<button onClick= { ()=>{ this.setState({ name: "大猫猫" }) } }>更改title</button><button onClick= { ()=>{ this.setState({ cont: 2 }) } }>更改cont</button></div>)}
}

简单说 我们利用了 componentDidUpdate 的参数 它可以拿到两个参数 分别是 props父组件传过来的值 还有 state组件的 state
注意 你用 this.state 拿到的是更改后的值 但 这个参数接到的 state 是本次修改前的内容

所以 只需要判断 this.state 和 函数参数的 state 中的name是不是完全一样 就能判断到 这次修改有没有改到name
为了让大家看到清楚 我特意加了个 cont
方便大家看

那么 我们运行项目 不管点击多少次 更改cont 都不胡触发到if(state.name !== this.state.name){中的逻辑
在这里插入图片描述
然后我们点击 更改title
第一次 逻辑就会顺利 触发 可以看到 state.name 拿到的是我们更改之前的值小猫猫 this.state.name 拿到的是我们更改之后的值 大猫猫
在这里插入图片描述
但是你点击过一次之后肯定是无法再触发了 因为之后他们就都等于 大猫猫了 自然是判断不到他们不同了

这是我们之前用类实现的形式
那么 后面 我们就来看看 Effect Hook 的写法

我们编写代码如下

import React,{ useState,useEffect } from "react"const MyComponent = () => {const [name,setName] = useState("小猫猫");const [cont,setCont] = useState(1);useEffect(() => {document.title = name;console.log("name值被更改了");},[name])return (<div>Hello World{ cont }<button onClick={ ()=> { setCont(cont+1)} }>更改cont</button><button onClick={ ()=> { setName("大猫猫")} }>更改title</button></div>);
};export default MyComponent;

大家可能看着有点懵 其实利用的就是useEffect第二个参数 是个数组 我们这里单放一个name 意思就是 useEffect 之间听name更改

当然 我们之前说过 useEffect 也带有 componentDidMount 的特性 所以 一进来会先触发一次 然后 name第一次改变 所以 一进来 它一共改变了两次
在这里插入图片描述
然后 我们点击更改cont
在这里插入图片描述
可以看到 不管怎么点 都不会触发了
然后我们点击更改title
可以看到 这样就触发了
在这里插入图片描述
当然 useEffect 可以写多个
也可以拿来当监听器用 这个其实还是非常好用的
如下图 两个都是可以起到自己的作用的
在这里插入图片描述

相关文章:

React 对比class与Effect Hook优化响应式数据更新监听,感受useEffect真正的强大

还是之前写过的一个组件 import React from "react"export default class index extends React.Component{constructor(props){super(props);this.state {name: "小猫猫"}}componentDidMount ()>{document.title this.state.name;}componentDidUpda…...

AWS Lambda 介绍

计算服务的演进 EC2------Container-------Lambda 虚拟机---容器--------------serverless无服务器架构 什么是AWS Lambda&#xff1f; AWS lambda的核心是事件驱动&#xff0c;驱动可能来自&#xff0c;Alexa,SNS&#xff0c;DynamoDB&#xff0c;S3&#xff0c;Kinesis等&…...

linux之权限管理

目录 1.一.基本小语句 2.文件权限操作chmod 1.一.基本小语句 ls - a 查看此文件夹所有和隐藏内容 ls - l 查看此文件夹权限 chown 改变文所有者 2.文件权限操作chmod chmod 参数 文件名 文件的权限主要针对三类对象进行定义   owner 属主, u:针对前三个部分的权限修改   …...

【设计模式与范式:行为型】61 | 策略模式(下):如何实现一个支持给不同大小文件排序的小程序?

上一节课&#xff0c;我们主要介绍了策略模式的原理和实现&#xff0c;以及如何利用策略模式来移除 if-else 或者 switch-case 分支判断逻辑。今天&#xff0c;我们结合“给文件排序”这样一个具体的例子&#xff0c;来详细讲一讲策略模式的设计意图和应用场景。 除此之外&…...

【C++】auto_ptr为何被唾弃?以及其他智能指针的学习

搭配异常可以让异常的代码更简洁 文章目录 智能指针 内存泄漏的危害 1.auto_ptr(非常不建议使用) 2.unique_ptr 3.shared_ptr 4.weak_ptr总结 智能指针 C中为什么会需要智能指针呢&#xff1f;下面我们看一下样例&#xff1a; int div() {int a, b;cin >&g…...

数据结构练习题1:基本概念

练习题1&#xff1a;基本概念 1 抽象数据类型概念分析2. 逻辑结构与存储结构概念分析3.综合选择题4.综合判断题5.时间复杂度相关习题6 时间复杂度计算方法&#xff08;一、二、三层循环&#xff09; 1 抽象数据类型概念分析 1.可以用&#xff08;抽象数据类型&#xff09;定义…...

如何消除Msxml2.XMLHTTP组件的缓存

之前使用这个组件&#xff0c;是每隔十分钟取数据&#xff0c;没有遇到这个缓存问题&#xff0c; 这次使用它是频繁访问接口&#xff0c;就出现了一直不变的问题。觉得是缓存没有清除的问题。 网上搜了一些方案。最好的方案就是给url地址末尾给一个随机参数。用于让组件觉得是…...

深入理解Java虚拟机jvm-运行时数据区域(基于OpenJDK12)

运行时数据区域 运行时数据区域程序计数器Java虚拟机栈本地方法栈Java堆方法区运行时常量池直接内存 运行时数据区域 Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域有各自的用途&#xff0c;以及创建和销毁的时间&#xff0c;有的…...

(OpenCV) 基础demo

文章目录 前言Demo图片录制播放人脸识别 END 前言 OpenCV - Open Computer Vision Library OpenCV的名声想必不用多说了。 本文介绍4个基础使用demo。分别为&#xff0c;显示图片&#xff0c;录制视频&#xff0c;播放视频和一个基于开源算法库的人脸识别小demo。 只要环境…...

using 的使用

作者: 苏丙榅 链接: https://subingwen.cn/cpp/using/ 在 C 中 using 用于声明命名空间&#xff0c;使用命名空间也可以防止命名冲突。在程序中声明了命名空间之后&#xff0c;就可以直接使用命名空间中的定义的类了。在 C11 中赋予了 using 新的功能&#xff0c;让C变得更年轻…...

Websocket、Socket、HTTP之间的关系

Websocket、Socket、HTTP之间的关系 ★ Websocket是什么&#xff1f;★ Websocket的原理★ websocket具有以下特点&#xff1a;★ webSocket可以用来做什么?★ websocket与socket区别&#xff1a;★ WebSocket与HTTP区别 ★ Websocket是什么&#xff1f; ● Websocket是HTML5下…...

hustoj LiveCD版系统在局域网虚拟机安装和配置

root权限 打开terminal命令行输入sudo su输入初始密码freeproblemsetmysql数据库的密码的位置&#xff0c;如何登陆数据库 数据库账号密码存放在两个配置文件中&#xff1a; /home/judge/etc/judge.conf/home/judge/src/web/include/db_info.inc.php 新版本中&#xff0c;快…...

读书-代码整洁之道10-14

类 类的三大特性&#xff1a;封装、继承、多态&#xff1b;类应该短小&#xff1b;单一权责原则认为&#xff0c;类或模块应有且只有一条加以修改的理由&#xff1b;当类丧失了内聚性&#xff0c;就拆分它&#xff1b;隔离修改 系统 构造和使用是非常不一样的过程。每个应用…...

UDP 广播/组播

广播UDP与单播UDP的区别就是IP地址不同&#xff0c;广播使用广播地址xxx.xxx.xxx.255&#xff0c;将消息发送到在同一广播网络上的每个主机&#xff0c;广播/组播只能用udp进行实现 函数:int setsockopt(int sockfd, int level, int optname, const void *optval, socklen_topt…...

高效创作助手:ChatGPT最新版实现批量撰写聚合文章的全新水平

随着人工智能技术的不断发展&#xff0c;ChatGPT最新版作为一款智能创作助手&#xff0c;实现了批量撰写聚合文章的全新水平。它能够在短时间内生成高质量的文章&#xff0c;极大地提高了创作效率。本文将从随机8-20个方面对ChatGPT最新版进行详细的阐述&#xff0c;让我们一起…...

Python中的包是什么,如何创建和使用包?

在Python中&#xff0c;包是一种将相关模块分组在一起的方式。它可以让我们更好地组织和重用代码。 一个Python包实际上是一个文件夹&#xff0c;其中包含该包的Python模块和其他资源文件&#xff08;例如配置文件、数据文件等&#xff09;。包的根目录通常包含一个名为__init…...

Spring Cloud Alibaba Seata(二)

目录 一、Seata 1、Seata-AT模式 1.1、具体案例 1.2、通过Seata的AT模式解决分布式事务 2、Seata-XA模式 3、Seata-TCC模式 4、Seata-SAGA模式 一、Seata 1、Seata-AT模式 概念&#xff1a;AT模式是一种无侵入的分布式事务解决方案&#xff0c;在 AT 模式下&#xff0c…...

如何在 MySQL 中使用 COALESCE 函数

1. 简介 在 MySQL 中&#xff0c;COALESCE 函数可以用来返回参数列表中的第一个非空值。如果所有参数都为空&#xff0c;则返回 NULL。本文将介绍 COALESCE 函数的语法和用法&#xff0c;并通过示例演示其效果。 2. 语法 COALESCE 函数的语法如下所示&#xff1a; COALESCE(…...

Python爬虫之Scrapy框架系列(22)——初识分布式爬虫scrapy_redis

目录: 分布式爬虫(Scrapy\_redis):1.简单介绍:2.Scrapy_redis的安装:分布式爬虫(Scrapy_redis): 官方文档:https://scrapy-redis.readthedocs.io/en/stable/1.简单介绍: scrapy_redis是一个基于Redis的Scrapy组件,用于scrapy项目的分布式部署和开发。 特点: 分布…...

ChatGPT的前世今生

原文首发于博客文章ChatGPT发展概览 ChatGPT 是OpenAI开发的人工智能聊天机器人程序&#xff0c;于2022年11月推出。该程序使用基于 GPT-3.5、GPT-4 架构的大语言模型并以强化学习训练。ChatGPT目前仍以文字方式交互&#xff0c;而除了可以用人类自然对话方式来交互&#xff0c…...

Linux链表操作全解析

Linux C语言链表深度解析与实战技巧 一、链表基础概念与内核链表优势1.1 为什么使用链表&#xff1f;1.2 Linux 内核链表与用户态链表的区别 二、内核链表结构与宏解析常用宏/函数 三、内核链表的优点四、用户态链表示例五、双向循环链表在内核中的实现优势5.1 插入效率5.2 安全…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...