useEffect使用详解

原创已于 2023-08-24 20:37:00 修改 · 1w 阅读

68 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2023-08-24 20:32:04 首次发布

前端专栏收录该内容

178 篇文章

订阅专栏

本文围绕React的useEffect钩子函数展开，介绍其用于处理副作用操作，接受副作用函数和依赖数组两个参数。阐述了常见用法与注意事项，重点分析使用useEffect时，依赖数组元素为对象或数组、闭包变量、函数时，监测不到元素变化的问题及相应解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useEffect是React中的一个钩子函数，用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作，比如数据获取、订阅事件、操作DOM等。

useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。

useEffect(() => {
  // 副作用函数
  // 在组件渲染时执行
  // 可以进行副作用操作
}, [依赖数组]);

副作用函数会在组件渲染时执行，并且在每次组件更新后也会执行。如果依赖数组不为空，并且依赖数组中的值发生变化时，副作用函数也会被重新执行。如果依赖数组为空，则副作用函数只会在组件渲染时执行一次。

以下是useEffect的一些常见用法和注意事项：

执行一次副作用操作：如果依赖数组为空，副作用函数只会在组件首次渲染时执行一次。

useEffect(() => {
  // 只会在组件首次渲染时执行一次
  // 可以进行一次性的副作用操作
}, []);

监听依赖变化：如果依赖数组中的值发生变化，副作用函数会被重新执行。

const [count, setCount] = useState(0);

useEffect(() => {
  // 当count的值发生变化时执行
  console.log(count);
}, [count]);

清除副作用操作：副作用函数可以返回一个清除函数，用于清除副作用操作，比如取消订阅、清除定时器等。

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Hello');
  }, 1000);

  // 返回清除函数
  return () => {
    clearInterval(timer);
  };
}, []);

异步操作：副作用函数可以是一个异步函数，可以在其中进行异步操作，比如数据获取。

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);

需要注意的是，副作用函数不能直接返回一个Promise，如果需要在副作用函数中使用Promise，可以在函数内部定义一个异步函数，并在该函数中使用Promise。

当使用useEffect时，可能会遇到的情况

当使用useEffect时，以下是几种可能会遇到的情况：

依赖数组元素是一个对象或数组：
- 场景：在状态中使用了一个对象或数组，并且希望在对象或数组的属性发生变化时执行副作用函数。
- 问题：如果依赖数组中的元素是一个对象或数组，只有当引用发生变化时，useEffect才会重新执行。如果您修改了对象或数组的属性，但是引用没有发生变化，useEffect无法感知到这个变化。
- 解决方案：确保在修改对象或数组的属性时，同时也修改了对象或数组的引用，例如使用展开运算符{ ...data, age: 20 }来创建一个新的对象。或者可以使用函数式更新来更新状态，这样可以确保在useEffect中获取到的是最新的状态值。
依赖数组元素是一个闭包变量：
- 场景：在副作用函数中使用了一个闭包变量，并且希望在闭包变量发生变化时执行副作用函数。
- 问题：如果依赖数组中的元素是一个闭包变量，那么在每次渲染时，useEffect都会获取到最新的闭包变量。因此，即使闭包变量的值发生了变化，useEffect也无法感知到这个变化。
- 解决方案：可以使用函数式更新来更新状态，这样可以确保在useEffect中获取到的是最新的状态值。
依赖数组元素是一个函数：
- 场景：在副作用函数中使用了一个函数，并且希望在函数发生变化时执行副作用函数。
- 问题：如果依赖数组中的元素是一个函数，那么useEffect会在每次渲染时都认为该函数发生了变化，从而重新执行副作用函数。
- 解决方案：将函数定义在useEffect的外部，并在副作用函数中引用该函数。或者使用useCallback将函数包裹起来，以确保在依赖项发生变化时，只有函数引用发生变化时才会重新执行副作用函数。

useEffect监测不到依赖数组元素的变化多种情况？

当使用useEffect时，如果依赖数组元素的变化没有被正确监测到，可能有以下几种情况：

依赖数组元素是一个对象或数组：useEffect使用浅层比较来判断依赖数组元素是否发生变化。如果依赖数组中的元素是一个对象或数组，只有当引用发生变化时，useEffect才会重新执行。如果您修改了对象或数组的属性，但是引用没有发生变化，useEffect无法感知到这个变化。

const [data, setData] = useState({ name: 'John' });

// 错误示例：修改对象属性，但引用未变化
setData({ ...data, age: 20 }); // useEffect无法感知到属性的变化

// 正确示例：修改对象属性，引用发生变化
setData(prevData => ({ ...prevData, age: 20 })); // useEffect会感知到属性的变化

依赖数组元素是一个闭包变量：如果依赖数组中的元素是一个闭包变量，那么在每次渲染时，useEffect都会获取到最新的闭包变量。因此，即使闭包变量的值发生了变化，useEffect也无法感知到这个变化。

const [count, setCount] = useState(0);

// 闭包变量
const handleClick = () => {
  setCount(count + 1);
};

useEffect(() => {
  console.log(count); // 每次渲染都会获取最新的count值
}, [count]); // 无法感知到闭包变量的变化

如果您希望useEffect能够感知到闭包变量的变化，可以使用函数式更新来更新状态，这样可以确保在useEffect中获取到的是最新的状态值。

const [count, setCount] = useState(0);

// 函数式更新
const handleClick = () => {
  setCount(prevCount => prevCount + 1);
};

useEffect(() => {
  console.log(count); // 每次渲染获取最新的count值
}, [count]); // 可以感知到闭包变量的变化

依赖数组元素是一个函数：如果依赖数组中的元素是一个函数，那么useEffect会在每次渲染时都认为该函数发生了变化，从而重新执行副作用函数。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
};

// 错误示例：将函数作为依赖数组元素
useEffect(() => {
  console.log(count);
}, [handleClick]); // 每次渲染都会重新执行副作用函数

如果您希望避免在每次渲染时都重新执行副作用函数，可以将函数定义在useEffect的外部，并在副作用函数中引用该函数。

const [count, setCount] = useState(0);

const handleClick = () => {
  setCount(count + 1);
};

// 正确示例：在副作用函数中引用函数
useEffect(() => {
  const handleEffect = () => {
    console.log(count);
  };

  handleEffect();
}, [count]); // 只在count发生变化时执行副作用函数

// 或者使用useCallback包裹函数
const handleEffect = useCallback(() => {
  console.log(count);
}, [count]);

useEffect(() => {
  handleEffect();
}, [handleEffect]);