【React】轻松掌握 React 中 useEffect的使用

你有没有想过，为什么你的 React 组件能够轻松应对周围发生的变化，比如每当有新数据到来时自动更新，或者处理可以动态响应实时事件的组件？这就是 useEffect 的用武之地！这个强大的钩子（Hook）就像是组件管理副作用和快速响应变化的秘籍。今天，我们就来探讨一下 useEffect，了解它是如何工作的、为什么我们需要它，并通过实际场景来展示你为什么会想用到 useEffect。那让我们开始吧！

我们可以把 useEffect 描述为一个允许你运行副作用的 React Hook。很多人对副作用到底是什么有点困惑。简单来说，副作用就是发生在 UI 渲染之外的代码行为。那么，我们具体是什么意思呢？打个比方，想象一下你正在做饭，厨房里有个定时器提醒你什么时候该检查食物。在这个例子中，定时器的存在促使你定期检查食物，这就像是一个副作用------来自于一个主要任务的行动结果。

在 React 中，这种概念同样适用。比如，可能需要在排行榜数据变更时获取新数据，以便向用户展示更新后的列表。为了说明这一点，我们来看一个简单的代码示例：

jsx 复制代码

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

function UserProfile({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/user/${userId}`)
      .then(response => response.json())
      .then(data => setUserData(data));
  }, [userId]); // userId 是我们的依赖

  return (
    <div>
      {userData ? <h1>{userData.name}</h1> : <p>Loading...</p>}
    </div>
  );
}

在这个例子中，我们通过 useEffect 来监听 userId 的变化，并在其变化时重新获取用户数据。

在深入了解 useEffect 工作原理之前，我们得先明白一点：在 React 引入 Hooks 之前，类组件是管理副作用和生命周期方法的主要方式。开发人员通过生命周期方法，比如 componentDidMount、componentDidUpdate 和 componentWillUnmount 来控制组件行为。但现在有了 useEffect，这个过程就变得简单多了。

jsx 复制代码

useEffect(() => {
  // 在组件挂载时运行
  console.log('Component mounted!');

  return () => {
    // 在组件卸载时进行清理
    console.log('Component unmounted!');
  };
}, []); // 空数组表示这个 effect 只运行一次

useEffect 在应用一打开时会立即执行，从 API 中获取数据，并展示默认位置纽约的天气状况。但如果我们输入了其他位置，它就会根据用户提交的位置再获取新数据。比如，在构建一个天气应用时：

jsx 复制代码

function WeatherApp({ location }) {
  const [weatherData, setWeatherData] = useState(null);

  useEffect(() => {
    fetch(`https://api.weather.com/v3/wx/conditions/current?geocode=${location}`)
      .then(response => response.json())
      .then(data => setWeatherData(data));
  }, [location]); // 注意 location 是我们的依赖

  return (
    <div>
      {weatherData ? <p>{weatherData.description}</p> : <p>Loading...</p>}
    </div>
  );
}

当我们需要在数据变化后立即更新组件状态时，useEffect 也显得尤为重要。比如在一个金融应用中，我们可以使用 useEffect 钩子每秒获取一次股票价格：

jsx 复制代码

useEffect(() => {
  const interval = setInterval(() => {
    fetchStockPrice();
  }, 1000);

  return () => clearInterval(interval); // 清理函数用于停止定时器
}, []);

接下来，我们将讨论两个常见的使用 useEffect 的陷阱。

第一个要避免的陷阱是未检査依赖数组。如果你在 useEffect 中包含了频繁变化的依赖变量，比如每 0.01 秒变化一次，而你在这个 effect 中进行 API 请求，这会导致与 API 的过多调用，极大增加网络流量。例如：

jsx 复制代码

useEffect(() => {
  const debounceFetch = setTimeout(() => {
    fetchData();
  }, 300); // 防抖时间设为 300 毫秒

  return () => clearTimeout(debounceFetch); // 清理函数用于取消延迟

}, [searchTerm]); // searchTerm 是可能频繁变化的变量

第二个要避免的陷阱是忽视清理副作用的重要性。想象你在开发一个聊天应用，每位用户都要连接到服务器即时接收消息：

jsx 复制代码

useEffect(() => {
  const socket = new WebSocket('wss://chat.example.com');

  return () => {
    socket.close(); // 确保 `WebSocket` 连接在组件卸载时关闭
  };
}, []);

每当在 useEffect 中处理副作用时需中断或终止进行中的过程，一定要使用清理函数。

这只是掌握 React 钩子的第二部分，后续我们会继续讨论 useContext、useRef、useCallback 等等，记得订阅以免错过这些精彩内容，敬请期待接下来的发展！今天就到这里啦！