13 React useEffect 详解

useEffect 是 React 中用于处理副作用操作的 Hook。副作用包括数据获取、订阅操作、手动修改 DOM 等。以下是一些 useEffect 的示例以及需要注意的知识：

1. 数据获取

import React, { useState, useEffect } from 'react';function DataFetching() {const [data, setData] = useState(null);useEffect(() => {const fetchData = async () => {const response = await fetch('https://api.example.com/data');const result = await response.json();setData(result);};fetchData();}, []); // 空数组作为依赖表示只在组件挂载时执行一次return (<div>{data && <p>Data: {data}</p>}</div>);
}
  • 需要注意的知识：
    • 异步操作应当在 useEffect 内部进行，以确保在组件渲染完成后执行。
    • 使用空依赖数组 [] 可以确保 useEffect 仅在组件挂载时执行一次。

2. 订阅操作

import React, { useState, useEffect } from 'react';function Subscription() {const [count, setCount] = useState(0);useEffect(() => {const intervalId = setInterval(() => {setCount(prevCount => prevCount + 1);}, 1000);return () => {clearInterval(intervalId);};}, []); // 空数组作为依赖表示只在组件挂载时执行一次return (<div><p>Count: {count}</p></div>);
}
  • 需要注意的知识：
    • useEffect 可以返回一个清理函数，在组件销毁时执行，用于清除副作用，比如取消订阅、清除定时器等。

3. 监听属性变化

import React, { useState, useEffect } from 'react';function PropChanges({ prop }) {const [count, setCount] = useState(0);useEffect(() => {setCount(count + 1);}, [prop]); // 当 prop 变化时触发 useEffectreturn (<div><p>Count: {count}</p></div>);
}
  • 需要注意的知识：
    • 通过传递一个包含变量的数组作为 useEffect 的依赖，可以监听该变量的变化并执行相应的副作用操作。

4. 手动修改 DOM

import React, { useEffect } from 'react';function DOMManipulation() {useEffect(() => {document.title = 'New Title';return () => {document.title = 'Original Title';};}, []); // 空数组作为依赖表示只在组件挂载时执行一次return (<div><p>DOM Manipulation Example</p></div>);
}
  • 需要注意的知识：
    • 在 useEffect 内部可以进行一些 DOM 操作，但是需要确保操作不会导致 React 和 DOM 同步问题。
    • 返回的清理函数可以用来恢复原始状态，以避免内存泄漏或者其他副作用。

5. 使用多个 useEffect

import React, { useState, useEffect } from 'react';function MultipleEffects() {const [count, setCount] = useState(0);const [data, setData] = useState(null);useEffect(() => {// effect for countdocument.title = `Count: ${count}`;return () => {document.title = 'Original Title';};}, [count]); // 当 count 变化时触发 useEffectuseEffect(() => {// effect for dataconst fetchData = async () => {const response = await fetch('https://api.example.com/data');const result = await response.json();setData(result);};fetchData();return () => {// cleanup for data};}, []); // 空数组作为依赖表示只在组件挂载时执行一次return (<div><p>Count: {count}</p>{data && <p>Data: {data}</p>}<button onClick={() => setCount(count + 1)}>Increment</button></div>);
}
  • 需要注意的知识：
    • 可以在同一个组件中使用多个 useEffect，每个 useEffect 之间相互独立。
    • 每个 useEffect 可以有自己的清理函数。

useEffect 的依赖可以分为三种情况：

  1. 空依赖数组：表示 useEffect 仅在组件挂载时执行一次。
  2. 包含具体依赖的数组：表示 useEffect 会在指定依赖发生变化时执行。
  3. 没有依赖数组：表示 useEffect 在每次组件渲染时都会执行。

下面是针对每种情况的详细示例以及注意知识：

1. 空依赖数组

import React, { useState, useEffect } from 'react';function EmptyDependencyExample() {const [count, setCount] = useState(0);useEffect(() => {console.log("Component mounted");return () => {console.log("Component unmounted");};}, []); // 空依赖数组表示仅在组件挂载和卸载时执行return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default EmptyDependencyExample;
  • 注意知识：
    • 使用空依赖数组 [] 可以确保 useEffect 仅在组件挂载时执行一次。
    • 清理函数用于执行清理工作，比如取消订阅、清除定时器等。

2. 具体依赖的数组

import React, { useState, useEffect } from 'react';function DependencyArrayExample({ prop }) {const [count, setCount] = useState(0);useEffect(() => {console.log("Component mounted or prop changed");// 每次 prop 或 count 变化时都会触发 useEffectreturn () => {console.log("Component unmounted or prop changed");};}, [prop, count]); // 传入依赖数组表示当其中任一依赖变化时执行return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default DependencyArrayExample;
  • 注意知识：
    • 通过传递一个包含变量的数组作为 useEffect 的依赖，可以监听该变量的变化并执行相应的副作用操作。
    • 当数组中的任一依赖变化时，useEffect 将会重新执行。

3. 没有依赖数组

import React, { useState, useEffect } from 'react';function NoDependencyExample() {const [count, setCount] = useState(0);useEffect(() => {console.log("Component rendered");return () => {console.log("Component re-rendered");};}); // 没有依赖数组表示在每次组件渲染时执行return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default NoDependencyExample;
  • 注意知识：
    • 没有传递依赖数组时，useEffect 在每次组件渲染时都会执行。
    • 当需要在组件渲染时执行某些操作，而不是依赖于特定的变量时，可以使用没有依赖数组的 useEffect。

一个函数组件中可以包含多个 useEffect。每个 useEffect 都可以处理不同的副作用，使代码更模块化和可维护。下面是一个示例：

import React, { useState, useEffect } from 'react';function MultipleEffectsExample() {const [count, setCount] = useState(0);const [data, setData] = useState(null);// 第一个 useEffect 处理 count 的副作用useEffect(() => {document.title = `Count: ${count}`;return () => {document.title = 'Original Title';};}, [count]); // 依赖于 count 的变化// 第二个 useEffect 处理 data 的副作用useEffect(() => {const fetchData = async () => {const response = await fetch('https://api.example.com/data');const result = await response.json();setData(result);};fetchData();return () => {// 在组件卸载或者 data 更新时执行清理操作// 比如取消请求等};}, [data]); // 依赖于 data 的变化return (<div><p>Count: {count}</p><p>Data: {data}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}export default MultipleEffectsExample;

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

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

相关文章

Android开发简易登录界面

Android开发简易登录界面

title: Android开发第四天 search: 2024-03-22 tags: Android开发 Android开发简易登录界面 文章目录 Android开发简易登录界面一、定义style样式二、完成 activity_main.xml 界面具体设计三、代码简述 背景 &#xff1a;在初学 android 开发的时候&#xff0c;为了尽量熟悉学…
阅读更多...
【Android】【Bluetooth Stack】蓝牙电话协议之拨打电话分析（超详细）

【Android】【Bluetooth Stack】蓝牙电话协议之拨打电话分析（超详细）

1. 精讲蓝牙协议栈（Bluetooth Stack）：SPP/A2DP/AVRCP/HFP/PBAP/IAP2/HID/MAP/OPP/PAN/GATTC/GATTS/HOGP等协议理论 2. 欢迎大家关注和订阅，【蓝牙协议栈】和【Android Bluetooth Stack】专栏会持续更新中.....敬请期待！ 目录 1. 协议架构 1.1 Profile Dependencies
阅读更多...
使用下SAP HANA强大的Cloud控制台

使用下SAP HANA强大的Cloud控制台

前言 SAP的HANA数据库(注：这里指是云平台版本，不是platform的本地部署版本）的版本发布，基本上每个季度都有一次发布。2024年的第一个版本内部已经Release了，很快就会推到生产环境当中。当前要发布的版本是：2024.2.6 （QRC 1/2024)。而且每个版本的维护周期最长不会超过7…
阅读更多...
Arduino+ESP8266+华为云物联网平台实现智能开关

Arduino+ESP8266+华为云物联网平台实现智能开关

前言 最近在做一个物联网项目&#xff0c;涉及到智能开关的开发。目前已经实现简单的TCP通信远程控制&#xff0c;但是考虑到后期的设备管理以及设备通信所需要的技术和服务器的维护成本&#xff0c;我决定将设备接入云平台。本文将详细阐述如何利用华为云的物联网平台&#x…
阅读更多...
DB-GPT安装部署使用初体验

DB-GPT安装部署使用初体验

DB-GPT是什么&#xff1f;引自官网&#xff1a; DB-GPT是一个开源的AI原生数据应用开发框架(AI Native Data App Development framework with AWEL(Agentic Workflow Expression Language) and Agents)。 目的是构建大模型领域的基础设施&#xff0c;通过开发多模型管理(SMMF)、…
阅读更多...
【ssh连接】奇奇怪怪报错记录

【ssh连接】奇奇怪怪报错记录

gitlab配置ssh连接&#xff0c;先跟着教程生成密钥&#xff0c;上传公钥&#xff0c;将服务器信息存入config文件&#xff0c;但是ssh连接超时&#xff0c;很急&#xff0c;想用服务器&#xff0c;各种搜索尝试&#xff0c;搞了两三天别的什么都没干&#xff0c;还是没解决&…
阅读更多...
【Canvas与艺术】淡蓝辉光汽车速度仪表盘

【Canvas与艺术】淡蓝辉光汽车速度仪表盘

【关键点】 内圈处渐变色的采用。 【效果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>淡蓝辉光汽车速度仪表盘</t…
阅读更多...
谈谈消息队列

谈谈消息队列

这篇文章我们来聊聊消息队列。我一直在想&#xff0c;能不能用一篇文章就把消息队列的所有内容给串联起来。然后&#xff0c;之后每次看到这篇文章的时候&#xff0c;我就能够立马回忆起来这个大知识的所有知识点。所以我想尝试一下用这种长文的方式&#xff0c;将我自己对于消…
阅读更多...
Ubuntu系统设置静态固定IP保姆级教程

Ubuntu系统设置静态固定IP保姆级教程

1、查看网络接口信息 ifconfig 首先需要确认要设置固定IP的网络接口。在大多数情况下&#xff0c;这通常是ens33 2、查看路由网关信息 route -n # 查看打印 路由表 网关地址 3、备份文件 为了防止防止出现意外问题。Ubuntu中的网络配置文件通常存储在/etc/netplan/目录下&…
阅读更多...
微服务概述

微服务概述

微服务 概述1.单体架构2.分布式架构3.微服务的架构特征&#xff1a; 服务拆分和远程调用提供者与消费者 概述 1.单体架构 单体架构&#xff1a;将业务的所有功能集中在一个项目中开发&#xff0c;打成一个包部署。 单体架构的优缺点如下&#xff1a; 优点&#xff1a; 架构…
阅读更多...
RPA使用Native Messaging 协议实现浏览器自动化

RPA使用Native Messaging 协议实现浏览器自动化

RPA 即机器人流程自动化&#xff0c;是一种利用软件机器人或人工智能来自动化业务流程中规则性、重复性任务的技术。RPA 技术可以模拟和执行人类在计算机上的交互操作&#xff0c;从而实现自动化处理数据、处理交易、触发通知等任务。帮助企业或个人实现业务流程的自动化和优化…
阅读更多...
Docker 搭建 Blockbridge

Docker 搭建 Blockbridge

Blockbridge 是一个开源的分布式存储系统&#xff0c;可以通过 Docker 容器化技术进行快速部署。本教程将详细介绍如何使用 Docker CLI 和 Docker Compose 两种方式来搭建 Blockbridge 环境。 前提条件 确保已经安装了 Docker 和 Docker Compose。拥有一个运行中的 Linux 系统…
阅读更多...
【Unity人机交互】人工智能之爬虫开章

【Unity人机交互】人工智能之爬虫开章

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…
阅读更多...
2015年认证杯SPSSPRO杯数学建模B题(第一阶段)替换式密码全过程文档及程序

2015年认证杯SPSSPRO杯数学建模B题(第一阶段)替换式密码全过程文档及程序

2015年认证杯SPSSPRO杯数学建模 B题 替换式密码 原题再现&#xff1a; 历史上有许多密码的编制方法。较为简单的是替换式密码&#xff0c;也就是将文中出现的字符一对一地替换成其它的符号。对拼音文字而言&#xff0c;最简单的形式是单字母替换加密&#xff0c;也就是以每个…
阅读更多...
精品推荐-史上最全腾讯全套人力资源管理资料合集（附下载）

精品推荐-史上最全腾讯全套人力资源管理资料合集（附下载）

史上最全腾讯全套人力资源管理资料合集&#xff0c;共六个专题。 知识星球下载地址&#xff1a;https://t.zsxq.com/18YFTROfG 一、腾讯各职位能力模型图 1、腾讯-产品经理能力素质模型图(策划 运用5个岗位).xls 2、腾讯项目经理能力素质模型图.xls 3、腾讯研发人员能力素质模…
阅读更多...
金蝶云星空和管易云·奇门单据接口对接

金蝶云星空和管易云·奇门单据接口对接

金蝶云星空和管易云奇门单据接口对接 ​​ ​​ 对接源平台:管易云奇门 管易云是上海管易云计算软件有限公司旗下的专注提供电商企业管理软件服务的品牌&#xff0c;总部位于中国上海张江高科技产业园区。管易云旗下拥有管易云C-ERP、EC-OMS、EC-WMS、B2C/B2B/BBC/微商城开发…
阅读更多...
速通数据结构第二站 顺序表

速通数据结构第二站 顺序表

文章目录 速通数据结构与算法系列 1 速通数据结构与算法第一站 复杂度 http://t.csdnimg.cn/sxEGF 感谢佬们支持&#xff01; 目录 系列文章目录 前言一、顺序表 0 结构体 1 接口声明 2 初始化和销毁 3 扩容函数 4 打印和判空 5 尾插 …
阅读更多...
每日新闻掌握【2024年3月26日 星期二】

每日新闻掌握【2024年3月26日 星期二】

2024年3月26日 星期二 农历二月十七 宏观经济 证券时报 湖南、辽宁、西安、重庆四地的地方金融监管部门先后发布公告&#xff0c;表示将取消各自辖内金交所的业务资质。据悉&#xff0c;接下来还会有更多地方陆续发布该公告。这意味着&#xff0c;在诸多金融风险事件中频繁现…
阅读更多...
基于51单片机的拔河游戏Proteus仿真

基于51单片机的拔河游戏Proteus仿真

地址&#xff1a;https://pan.baidu.com/s/18LMEo-_WYcoyTOkWYJ0NUg 提取码&#xff1a;1234 仿真图&#xff1a; 1&#xff09;设计一个能进行拔河游戏的电路&#xff0c;通过按键控制游戏开始和复位。 2&#xff09;电路使用9个发光二极管排成一行&#xff0c;中间的LED为拔…
阅读更多...
Linux C++ 004-流程控制语句

Linux C++ 004-流程控制语句

Linux C 004-流程控制语句 本节关键字&#xff1a;Linux、C、流程控制语句 相关库函数&#xff1a; C/C支持最基本的三中程序运行结构&#xff1a;顺序结构、选择结构、循环结构 类型作用顺序结构程序按顺序执行&#xff0c;不发生跳转选择结构依据条件是否满足&#xff0c;有…
阅读更多...
最新文章

Copyright @ 2022~2023