13 React useEffect 详解

已于 2024-03-25 03:28:27 修改
阅读量626 收藏 8
点赞数 4
分类专栏： React 文章标签： react.js 前端 javascript
于 2024-03-25 03:28:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a457636876/article/details/137000240
版权

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 变化时触发 useEffect

  return (
    <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 count
    document.title = `Count: ${count}`;

    return () => {
      document.title = 'Original Title';
    };
  }, [count]); // 当 count 变化时触发 useEffect

  useEffect(() => {
    // effect for data
    const 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 变化时都会触发 useEffect
    return () => {
      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;
a457636876
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 使用 useEffect 及踩坑
秋来九月八
02-25 2万+
useEffect时reactHook中最重要，最常用的hook之一。useEffect相当于react中的什么生命周期呢？这个问题在react官网中有过介绍，在使用的过程中，容易被忽略，在面试的时候却经常被问及，（面试造航母，上班拧螺丝？
React--useEffect
weixin_45269534的博客
06-27 4012
useEffect
React（五）useEffect、useRef、useImperativeHandle、useLayoutEffect
最新发布
DogEgg_001的博客
06-02 1311
只能说是对useEffect相见恨晚，这个钩子好牛b今天写的较为简略QAQ。
React useEffect详解
qq_41985405的博客
06-09 816
参数1：逻辑处理函数；参数2：数组或者不传。
轻松学会 React 钩子：以 useEffect() 为例
sanlyshi's front-end road
07-26 643
这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。上面的例子是错误的写法，副效应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
React中的useEffect(副作用)
weixin_47075145的博客
11-16 4053
useEffect是用来使函数组件也可以进行副作用操作的。那么什么是副作用呢？函数的副作用就是函数除了返回值外对外界环境造成的其它影响。举个例子，假如我们每次执行一个函数，该函数都会操作全局的一个变量，那么对全局变量的操作就是这个函数的副作用。而在React的世界里，我们的副作用大体可以分为两类，一类是调用浏览器的API，例如使用addEventListener来添加事件监听函数等，另外一类是发起获取服务器数据的请求，例如当用户组件挂载的时候去异步获取用户的信息等。
react的hooks的用法详解
10-14
其次，`useEffect` 是React Hooks中的另一个关键钩子，它用于模拟生命周期方法，如`componentDidMount`, `componentDidUpdate` 和 `componentWillUnmount`。`useEffect`接收两个参数：一个函数（执行副作用的函数）...
react全家桶资料.zip
08-13
6. `React Hooks详解.md` - 自React 16.8版本引入的Hooks，如`useState`、`useEffect`和`useReducer`，简化了无类组件的状态管理和副作用处理。 此外，你可能还会遇到React Router的资料，这是一个流行的React路由...
详解React中传入组件的props改变时更新组件的几种实现方法
10-18
当必须使用`state`时，应谨慎使用`getDerivedStateFromProps`，并考虑使用`useEffect`（对于函数组件）或`shouldComponentUpdate`（对于类组件）来控制更新。通过这种方式，可以提高组件的性能，减少错误，并使代码...
react-interview:卡老师视频详解React面试题
05-27
在本资源"react-interview:卡老师视频详解React面试题"中，卡老师为我们深入剖析了React面试中可能遇到的问题，旨在帮助求职者或者开发者更好地理解React的核心概念和技术要点。以下是对React面试中常见知识点的详细...
2022社招react面试题详解（备战2022）.pdf
12-15
- **Hooks**：React 16.8引入的新特性，允许在函数组件中使用状态和其他React特性，如`useState`、`useEffect`等，简化了代码复用和管理。 React不断迭代这些技术是为了提升开发效率、代码可读性和可维护性。Hooks...
react中副作用函数(useEffect)详解
DDAD9527的博客
11-12 7219
先简单说一下常见的useEffect使用方式 三种 useEffect(() => { // 副作用函数的内容 }) 每次更新之后都要执行 -------------------- useEffect(() => { // 副作用函数的内容 }, []) 初始化页面时 只执行第一次 -------------------- useEffect(() => { // 副作用函数的内容 }, [依赖项]) //依赖项可以有多个 1 初始执行一次 2 每次依赖项的值变化时
react知识点之useState、useEffect的使用（函数式组件，class组件的示例）
小糖豆
08-20 5534
react的组件分为函数式组件和class组件，即一个有各种状态和生命周期，另外一个没有 示例 class组件实现实时刷新时间显示 import React, { Component } from "react"; export default class ClassComponent extends React.Component { constructor(props) { super(props); // 使⽤用state属性维护状态，在构造函数中初始化状态 this.state = { date.
React useState，useEffect ，Hook是什么？什么是副作用？
a_靖的博客
05-19 7398
useState 是设置state的值，他有两个属性，departmentModal,setDepartmentModal 代码示例： import React from 'react'; import { useState } from 'react'; const Customer = ({ dispatch,orderList}) => { const [departmentModal, setDepartmentModal] = useState(false); var...
React入门（三）
weixin_47909226的博客
05-26 343
React入门（三）
react useEffect(个人笔记，非教程)
qq_44408123的博客
10-09 1046
1.在第一次渲染之后和每次更新之后都会执行传入的函数，React 保证了每次运行 effect 的同时，DOM 都已经更新完毕 无需清除的effect useEffect(() => { // 每次界面重新渲染之后就会执行 // 类似在 componentDidMount 和 componentDidUpdate 中同时传入该回调函数 // document.title =...
REACT useEffect的使用和原理
weixin_49857754的博客
09-18 2224
原文：https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/ Dan Abramov const [count,setCount] = useState(0); useEffect(() => { setTimeout(() => { console.log('计数器的值'+count); }, 3000); }); return( <> <button onClick={() =
React中useEffect使用
热门推荐
文摘资讯
08-24 1万+
之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置this.state为{ count: 0 }来初始化countstat...
useEffect使用的介绍
前端精髓
08-23 5010
如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。 实现一个 componentDidMount 的功能 function Demo () { useEffect(() => { consol...
react useEffect
07-27
回答: 在React中，useEffect是一个用于执行副作用的钩子函数。副作用是指每次组件更新都会执行的函数，可以用来取代生命周期方法。根据不同的使用方式，useEffect可以在组件挂载、更新和卸载时执行不同的逻辑。\[3\] 常见的useEffect使用方式有三种： 1. 每次更新都执行：不传递第二个参数，这会导致每次渲染都会运行useEffect。当它运行时，它获取数据并更新状态。一旦状态更新，组件将重新呈现，这将再次触发useEffect。\[1\] 2. 初始化页面时只执行一次：传递一个空数组作为第二个参数，这样useEffect只会在组件挂载时执行一次。\[2\] 3. 依赖项变化时执行：传递一个包含依赖项的数组作为第二个参数，当依赖项的值发生变化时，useEffect会执行。可以传入多个依赖项，只要有一项有变更就会执行effect。\[2\] 在使用useEffect时，可以根据需要返回一个清除函数，用于清除副作用。例如，设置一个定时器时，需要在组件卸载时关闭定时器，就可以在副作用中返回一个函数来关闭定时器。\[3\] 总结来说，useEffect是一个非常有用的钩子函数，可以用于处理组件的副作用逻辑，取代了传统的生命周期方法。根据不同的使用方式，可以在组件挂载、更新和卸载时执行不同的逻辑。 #### 引用[.reference_title] - *1* [react useEffect详解](https://blog.csdn.net/weixin_45760365/article/details/124386573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [react中副作用函数(useEffect)详解](https://blog.csdn.net/DDAD9527/article/details/121294563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [react中的useEffect](https://blog.csdn.net/zsm4623/article/details/127733367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值