不同的 useEffect 用例

React 中的 useEffect Hook 可以让我们在函数组件中管理副作用。副作用指的是一些不纯的操作，比如请求数据、修改 DOM 状态等等。

useEffect 的使用场景很多，下面我们来看一些不同的用例。

1. 当组件挂载时执行一次

当组件第一次渲染到页面时，我们可能需要执行一些操作，比如获取数据、初始化某些状态等。这时可以使用无依赖数组的形式来使用 useEffect：

useEffect(() => {
  // 这里可以执行初始化操作
}, []);

2. 当某个属性变化时触发副作用

有时我们需要根据某个属性的变化来执行副作用，比如根据用户 ID 获取对应的订单数据：

function OrderList({ userId }) {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    async function fetchOrders() {
      const response = await fetch(`/orders?userId=${userId}`);
      const data = await response.json();
      setOrders(data);
    }

    fetchOrders();
  }, [userId]);

  return (
    <ul>
      {orders.map(order => (
        <li key={order.id}>{order.name}</li>
      ))}
    </ul>
  );
}

这里我们使用了 userId 作为依赖项，当它变化时，useEffect 会再次执行，从而重新请求订单数据。

3. 清除副作用

有些副作用在组件卸载时需要被清除，比如取消订阅、清除定时器等。这时可以在 useEffect 中返回一个清除函数：

useEffect(() => {
  const intervalId = setInterval(() => {
    // do something
  }, 1000);

  return () => {
    clearInterval(intervalId);
  };
}, []);

这里我们创建了一个定时器，并在 useEffect 的返回值中返回了清除函数。当组件卸载时，清除函数就会被执行，从而清除定时器。

4. 多个依赖项

有些情况下，我们需要根据多个依赖项来执行副作用。比如根据选中的城市和日期获取天气预报数据：

function Weather({ city, date }) {
  const [weather, setWeather] = useState({});

  useEffect(() => {
    async function fetchWeather() {
      const response = await fetch(`/weather?city=${city}&date=${date}`);
      const data = await response.json();
      setWeather(data);
    }

    fetchWeather();
  }, [city, date]);

  return (
    <div>{/* 显示天气预报数据 */}</div>
  );
}

这里我们使用了 city 和 date 作为依赖项，在它们变化时会重新请求天气预报数据。

总结

useEffect 是一个非常强大的 Hook，可以让我们在函数组件中管理副作用。它有很多用例，包括在组件挂载、属性变化、清除副作用以及多个依赖项变化时触发副作用等。在使用时，我们需要注意依赖项的选择，以避免不必要的重复执行。