突破传统，手把手教你掌握手写useEffect的精髓

前端

2024-02-15 15:45:53

useEffect的简介

在React中，useEffect是一个内置的钩子函数，它允许我们在函数组件中执行副作用。副作用是指那些会影响组件状态或外部数据的操作，比如发起网络请求、设置定时器、更新DOM等。

useEffect有两个主要参数：第一个参数是一个函数，它包含了我们要执行的副作用；第二个参数是一个数组，它指定了useEffect将在哪些条件下被调用。

手写useEffect的步骤

1. 确定副作用

第一步是确定你要在组件中执行哪些副作用。这可能包括发起网络请求、设置定时器、更新DOM等。

2. 创建一个useEffect函数

一旦你确定了要执行的副作用，就可以创建一个useEffect函数。useEffect函数的第一个参数是一个函数，它包含了你要执行的副作用。

const MyComponent = () => {
  useEffect(() => {
    // 你的副作用代码
  }, []);
};

3. 指定useEffect的执行条件

useEffect的第二个参数是一个数组，它指定了useEffect将在哪些条件下被调用。如果数组为空，则useEffect将在组件每次渲染后被调用。如果数组中包含一个或多个值，则useEffect将在这些值发生变化时被调用。

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

  useEffect(() => {
    // 这个副作用将在count发生变化时被调用
  }, [count]);
};

手写useEffect的技巧

1. 使用空数组作为useEffect的第二个参数

如果你想让useEffect在组件每次渲染后被调用，你可以使用空数组作为useEffect的第二个参数。这可以确保useEffect在组件生命周期的每个阶段都被调用，包括初始渲染和后续更新。

const MyComponent = () => {
  useEffect(() => {
    // 这个副作用将在组件每次渲染后被调用
  }, []);
};

2. 使用依赖项数组来指定useEffect的执行条件

如果你想让useEffect在组件状态或道具发生变化时被调用，你可以使用依赖项数组来指定useEffect的执行条件。依赖项数组是useEffect的第二个参数，它是一个数组，其中包含了useEffect将在哪些条件下被调用。

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

  useEffect(() => {
    // 这个副作用将在count发生变化时被调用
  }, [count]);
};

3. 使用useEffect来清理副作用

useEffect还可以用来清理副作用。要做到这一点，你可以在useEffect的第一个参数中返回一个函数。这个函数将在组件销毁时被调用，它可以用来清理useEffect中创建的任何资源。

const MyComponent = () => {
  useEffect(() => {
    // 创建一个定时器
    const timer = setInterval(() => {
      // 每秒钟更新一次count
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // 返回一个函数来清理定时器
    return () => {
      clearInterval(timer);
    };
  }, []);
};