React中useEffect钩子

devtools/2024/10/15 3:37:30/
  • 副作用：渲染以外的操作：像后端获取数据、操作DOM
  • 参数：副作用方法、依赖（改变时重新执行）
  • 调用时间：渲染JSX之后/依赖改变

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅或手动更改 React 组件中的 DOM 等。useEffect 使得在函数组件中处理这些操作变得简单而强大。

基本用法

useEffect 接受一个函数和一个依赖数组作为参数。当依赖数组中的任何值发生变化时，该函数将被重新执行。如果没有提供依赖数组，则该函数将在每次渲染后执行。

import React, { useState, useEffect } from 'react';  function Example() {  const [count, setCount] = useState(0);  useEffect(() => {  // 副作用操作  document.title = `You clicked ${count} times`;  // 清理函数（可选）  return () => {  // 组件卸载或依赖项变化前执行的清理操作  console.log('Clean up');  };  }, [count]); // 只有当 count 变化时，副作用操作才会重新执行  return (  <div>  <p>You clicked {count} times</p>  <button onClick={() => setCount(count + 1)}>  Click me  </button>  </div>  );  
}

详解

  1. 副作用函数：
    • useEffect 第一个参数是一个函数，该函数中包含了所有副作用操作。
    • 这些操作可以是数据获取、订阅外部数据源、手动操作 DOM 等。
  2. 依赖数组：
    • 第二个参数是一个依赖数组（依赖项）。
    • 当数组中的某个依赖项发生变化时，副作用函数会重新执行。
    • 如果省略这个数组，副作用函数会在每次渲染后执行。
  3. 清理函数：
    • 副作用函数可以返回一个函数，这个函数会在组件卸载或下次副作用执行前执行。
    • 常用于取消订阅、清除计时器、还原之前的手动 DOM 操作等。
  4. 空依赖数组：
    • 如果依赖数组为空 []，则副作用函数只会在组件挂载和卸载时执行一次。
    • 这类似于类组件中的 componentDidMount 和 componentWillUnmount。
  5. 多个 useEffect：
    • 你可以在一个组件中使用多个 useEffect 来分离不同的副作用逻辑。
    • 每个 useEffect 都可以有自己的依赖数组和清理函数。

注意事项

  • 避免在副作用函数中直接修改状态：
    • 副作用函数应该只包含副作用操作，如数据获取、订阅等。
    • 状态更新应该通过事件处理函数或其他 React 机制来进行。
  • 确保清理函数无副作用：
    • 清理函数中的操作应该是幂等的，即多次执行相同操作不会改变状态或导致错误。
  • 依赖项要准确：
    • 确保依赖数组包含所有影响副作用函数行为的变量，以避免不必要的副作用执行。

示例

以下是一个包含多个 useEffect 的示例，分别处理数据获取和手动 DOM 操作：

import React, { useState, useEffect } from 'react';  function DataFetcher() {  const [data, setData] = useState(null);  const [input, setInput] = useState('');  useEffect(() => {  // 数据获取副作用  fetch(`https://api.example.com/data?query=${input}`)  .then(response => response.json())  .then(result => setData(result))  .catch(error => console.error('Error fetching data:', error));  }, [input]); // 仅在 input 变化时重新获取数据  useEffect(() => {  // 手动 DOM 操作副作用  const element = document.getElementById('focusElement');  if (element) {  element.focus();  }  // 清理函数  return () => {  if (element) {  element.blur();  }  };  }, []); // 只在组件挂载和卸载时执行  return (  <div>  <input  type="text"  value={input}  onChange={e => setInput(e.target.value)}  placeholder="Search..."  />  {data ? (  <div>  <h1>{data.title}</h1>  <p>{data.description}</p>  <input id="focusElement" type="text" placeholder="Auto-focused" />  </div>  ) : (  <p>Loading...</p>  )}  </div>  );  
}

useEffect 是 React 函数组件中的一个 Hook，用于执行副作用操作。副作用操作是那些不在 React 渲染过程中的操作，比如数据获取、订阅外部数据源、手动更改 DOM 等。useEffect 使得在函数组件中处理这些操作变得简单而强大。

useEffect 的基本用法

useEffect 接受一个函数（副作用函数）和一个依赖数组作为参数。当依赖数组中的任何值发生变化时，副作用函数会重新执行。如果省略依赖数组，副作用函数会在每次组件渲染后都执行。

useEffect(() => {  // 副作用操作  return () => {  // 清理操作（可选）  };  
}, [dependency1, dependency2, ...]); // 依赖数组

依赖数组

依赖数组是 useEffect 的第二个参数，它是一个包含依赖项的数组。这些依赖项通常是组件的状态变量或 props。当数组中的任何一个依赖项发生变化时，React 会重新调用 useEffect 中的副作用函数。

  • 如果依赖数组为空（[]），则副作用函数只会在组件挂载（componentDidMount 等效）和卸载（componentWillUnmount 等效）时执行一次。
  • 如果依赖数组包含状态变量或 props，则每当这些依赖项变化时，副作用函数会重新执行。

注意事项

  • 副作用函数内部不应该直接修改状态或触发其他副作用，因为这可能会导致无限循环或其他难以调试的问题。状态更新应该通过事件处理函数或其他 React 机制来进行。
  • 清理函数（useEffect 返回的函数）用于在副作用函数执行完毕后进行清理操作，比如取消订阅、清除计时器等。它会在组件卸载或下次副作用执行前执行。
  • 依赖数组应该包含所有影响副作用函数行为的变量，以避免不必要的副作用执行。

示例

以下是一个使用 useEffect 和依赖数组的示例，用于在组件挂载时获取数据，并在数据变化时更新 UI

import React, { useState, useEffect } from 'react';  function DataFetcher() {  const [data, setData] = useState(null);  const [query, setQuery] = useState('');  useEffect(() => {  // 数据获取副作用  fetch(`https://api.example.com/data?query=${query}`)  .then(response => response.json())  .then(result => setData(result))  .catch(error => console.error('Error fetching data:', error));  }, [query]); // 依赖数组包含 query，当 query 变化时重新获取数据  return (  <div>  <input  type="text"  value={query}  onChange={e => setQuery(e.target.value)}  placeholder="Search..."  />  {data ? (  <div>  <h1>{data.title}</h1>  <p>{data.description}</p>  </div>  ) : (  <p>Loading...</p>  )}  </div>  );  
}


http://www.ppmy.cn/devtools/125962.html

相关文章

K8s中pod的管理和优化

K8s中pod的管理和优化

一、k8s中的资源 1.1 资源管理介绍 在kubernetes中&#xff0c;所有的内容都抽象 资源&#xff0c;用户需要通过操作资源来管理kubernetes。kubernetes的本质上就是一个集群系统&#xff0c;用户可以在集群中部署各种服务所谓的部署服务&#xff0c;其实就是在kubernetes集群中…
阅读更多...
机房建设及运维方案重构：迎接信息技术新时代的挑战

机房建设及运维方案重构：迎接信息技术新时代的挑战

随着信息技术的飞速发展&#xff0c;机房作为企业数据处理与存储的核心场所&#xff0c;其重要性愈发显著。机房不仅是企业业务稳定运行的基础&#xff0c;更是支撑企业长期发展的战略资源。面对日益复杂多变的运维环境和不断增长的业务需求&#xff0c;传统的机房建设和运维模…
阅读更多...
【Python库安装】Python环境安装气象地理常用库salem

【Python库安装】Python环境安装气象地理常用库salem

【Python库安装】Python环境安装salem库 salem库概述Anaconda创建环境下载基础安装包 1 安装geopandas库1.1 安装geopandas依赖库1.2 安装geopandas库1.3 安装matplotlib库 2 安装salem库2.1 安装salem依赖库2.2 安装salem库 3 安装cartopy库参考 salem库概述 salem是一个用于…
阅读更多...
Notepad++ 初学者指南

Notepad++ 初学者指南

引言 对于初学者来说&#xff0c;选择合适的编程工具很重要&#xff0c;特别是考虑到易用性和计算机资源的需求。 虽然集成开发环境&#xff08;IDE&#xff09;如 Eclipse、IntelliJ IDEA 和 Visual Studio 提供了许多强大的功能&#xff0c;但对于刚开始学习编程的人来说&a…
阅读更多...
C语言笔记 10

C语言笔记 10

求前n项之和 程序设计 f(n)1… 起点终点数字已知&#xff0c;用for循环最合适 #include <stdio.h>int main() {int n;int i;double sum 0.0;scanf("%d", &n);for ( i1; i<n; i ) {sum 1.0/i;}pritnf("f(%d)%f\n", n, sum);return 0; } i…
阅读更多...
TCP IP网络编程

TCP IP网络编程

文章目录 TCP IP网络编程一、基础知识&#xff08;TCP&#xff09;1&#xff09;Linux1. socket()2.bind()2.1前提2.2字节序与网络字节序2.3 字节序转换2.4 字符串信息转化成网络字节序的整数型2.5 INADDR_ANY 3.listen()4.accept()5.connect()6.案例小结6.1服务器端6.2 客户端…
阅读更多...
【一文理解】下采样与上采样区别

【一文理解】下采样与上采样区别

目录 下采样 上采样 注意 下采样 原理 对图像进行1/n下采样&#xff0c;原图像分辨率为H*W&#xff0c;下采样分辨率变为(H/n)*(W/n&#xff09; 作用 压缩Feature Map降维减少提取特征降低模型计算量避免模型过拟合 本质 过滤无关信息&#xff0c;保留关键信息 方法…
阅读更多...
循环语句的使用

循环语句的使用

文章目录 前言一、for 循环二、while 循环三、do…while 循环四、循环控制语句总结 前言 在 C 语言中&#xff0c;循环语句允许程序重复执行某段代码&#xff0c;以便处理多次相似的操作。C 语言主要提供三种循环结构&#xff1a;for 循环、while 循环和 do...while 循环。以下…
阅读更多...
最新文章

Copyright @ 2022~2023