什么是 useEffect

useEffect 是 React 中一个用于处理副作用的 Hook。副作用（Side effect）在 React 中指的是那些不改变组件状态但会影响外部环境的操作，例如请求网络数据、修改 DOM 等操作。useEffect 可以让我们在函数组件中处理这些副作用。

副作用的分类

副作用可以分为三类：

• 订阅某些外部数据源
• 手动修改 DOM
• 发起网络请求、添加定时器等

useEffect 的用法

useEffect 接收两个参数：第一个参数是一个函数，称为 effect 函数，这个函数会在组件渲染完成后执行；第二个参数是一个数组，称为依赖数组。如果依赖数组为空，那么 effect 函数会在每次组件渲染完成后都执行；如果有依赖数组，那么只有当数组中的值发生变化时，effect 函数才会执行。

下面是一个简单的示例：

import { useState, useEffect } from 'react';

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

  // 没有依赖数组，effect 函数会在每次渲染完后都执行
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

上面的代码中，每次单击按钮后会更新 count 的值，并且触发组件重新渲染。在每次渲染完之后，useEffect 中的函数会执行一次，用来更新文档标题。这是一个没有依赖数组的示例，意味着每次更新都会触发 useEffect 的执行，这对某些场景下可能会有性能问题。

有时候我们不希望在每次更新时都调用 useEffect，而是只在某个值改变时调用。这时我们可以使用依赖数组：

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  // 只有 count 发生变化时，effect 函数才会执行
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <input type="text" value={name} onChange={e => setName(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

上面的代码中，我们加入了一个 <input> 元素来获取用户姓名。因为我们只需要把点击次数显示在标题中，所以我们只希望在 count 发生变化后执行 useEffect，这时候我们就可以把 count 放入依赖数组中。

useEffect 的注意事项

以下是在使用 useEffect 时可能需要注意的一些问题：

• useEffect 的清除函数不要忘记编写，否则可能会导致内存泄漏。
• 在 effect 函数中使用 state 时，不要忘记将所有 state 都放到依赖数组中。
• 在 effect 函数中返回一个清除函数，可以在组件卸载时清除 effect，避免内存泄漏。

总结

useEffect 是 React Hooks 中使用最频繁的一个 Hook，它可以让我们在组件中处理副作用，包括订阅外部数据源、手动操作 DOM、发起网络请求等。在使用 useEffect 时，我们需要注意避免因忘记写依赖数组而导致的性能问题，同时要注意清除 effect 函数，防止内存泄漏。