Skip to main content

react 的 Hook 之 useEffect

useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用是指那些影响组件外部状态的操作，例如数据获取、订阅、手动更改 DOM 等。在类组件中，这些操作通常是在生命周期方法中完成的，而 useEffect 则为函数组件提供了一个等效的解决方案。

useEffect 的基本用法​

useEffect 的基本语法如下：

import React, { useEffect } from "react";

function MyComponent() {
  useEffect(
    () => {
      // 在这里执行副作用操作
      console.log("Component mounted or updated");

      // 可选的清理函数
      return () => {
        console.log("Component will unmount or update");
      };
    },
    [
      /* 依赖项列表 */
    ]
  );

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

useEffect 的参数​

  1. 副作用函数：这是一个在组件渲染后执行的函数。你可以在这个函数中执行任何需要的副作用操作。

  2. 依赖项数组（可选）：这是一个数组，用于指定副作用依赖的状态或属性。如果数组为空，副作用只在组件挂载和卸载时执行（类似于类组件的 componentDidMount 和 componentWillUnmount）。如果指定了依赖项，副作用会在组件初次渲染和每次依赖项变化时执行。

依赖项数组的作用​

  • 不传入依赖项数组：副作用在每次组件渲染后都会执行。

    useEffect(() => {
      console.log("Always run after every render");
    });

  • 空依赖项数组 []：副作用只在组件挂载和卸载时执行。

    useEffect(() => {
      console.log("Run only once on mount");

      return () => {
        console.log("Cleanup on unmount");
      };
    }, []);

  • 有依赖项数组：副作用在组件挂载以及任一依赖项变化时执行。

    useEffect(() => {
      console.log("Run on specific state changes");
    }, [someState, someProp]);

清理函数​

useEffect 可以返回一个清理函数，用于在组件卸载或副作用重新执行前清理资源。清理函数通常用于取消订阅、清除计时器或重置 DOM 修改等操作。

示例​

import React, { useState, useEffect } from "react";

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

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 清理函数
    return () => clearInterval(timer);
  }, []); // 空数组，定时器只在组件挂载时设置

  return <div>Timer: {count} seconds</div>;
}

在这个例子中，useEffect 设置了一个定时器，该定时器每秒更新一次计数器。当组件卸载时，清理函数会清除定时器。通过空依赖项数组确保定时器只在组件挂载时设置一次。

注意事项​

  • 确保正确设置依赖项数组，以避免不必要的副作用执行或遗漏更新。
  • 使用清理函数清理资源，以防止内存泄漏。
  • 在 useEffect 中直接更新状态可能导致无限循环，因此应谨慎使用。

useEffect 是一个强大的工具，可以帮助开发者在函数组件中高效地管理副作用操作。通过合理使用依赖项数组和清理函数，可以确保组件在不同生命周期阶段表现正确。