React Hooks 系列：useEffect 的解析笔记

2025-03-05 暂无评论

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用操作通常包括数据获取、订阅、手动操作 DOM 等。useEffect 可以看作是 componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个生命周期方法的组合。

基本用法

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // 这里的代码在组件挂载后和每次更新后都会执行

    return () => {
      // 这里的代码在组件卸载前执行
    };
  }, []); // 依赖项数组

  return <div>My Component</div>;
}

参数详解

副作用函数：useEffect 的第一个参数是一个函数，这个函数会在组件挂载后和每次更新后执行。如果这个函数返回一个函数，那么这个返回的函数会在组件卸载前执行，通常用于清理操作（如取消订阅、清除定时器等）。
依赖项数组：useEffect 的第二个参数是一个数组，用于指定副作用函数的依赖项。只有当依赖项发生变化时，副作用函数才会重新执行。如果省略这个参数，副作用函数会在每次组件渲染后都执行。如果传递一个空数组 []，副作用函数只会在组件挂载和卸载时执行。

使用场景

组件挂载时执行一次：

useEffect(() => {
  console.log('Component mounted');
}, []);

组件更新时执行：

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

useEffect(() => {
  console.log('Count updated:', count);
}, [count]); // 只有当 count 发生变化时才会执行

组件卸载时执行清理操作：

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

  return () => {
    clearInterval(timer); // 组件卸载时清除定时器
  };
}, []);

组合使用：

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 () => {
    // 清理操作
  };
}, []); // 只在组件挂载时执行

注意事项

避免无限循环：如果副作用函数中更新了状态，并且这个状态是依赖项之一，可能会导致无限循环。例如：
```
const [count, setCount] = useState(0);

useEffect(() => {
  setCount(count + 1); // 这会导致无限循环
}, [count]); // count 是依赖项
```
为了避免这种情况，可以确保副作用函数不会在每次渲染时都更新状态，或者使用 useCallback 或 useMemo 来优化依赖项。
依赖项数组：如果依赖项数组中有对象或数组，React 会进行浅比较。如果这些对象或数组在每次渲染时都重新创建，副作用函数可能会频繁执行。可以使用 useMemo 或 useCallback 来避免这种情况。
异步操作：如果副作用函数中包含异步操作（如 fetch 请求），确保在组件卸载时取消这些操作，以避免内存泄漏。

总结

useEffect 是 React 中处理副作用的重要工具，合理使用它可以简化代码并提高组件的可维护性。理解其工作原理和使用场景，可以帮助你更好地管理组件的生命周期和副作用操作。