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

---

你有没有想过，为什么你的 React 组件能够轻松应对附近发生的变化，好比每当有新数据到来时自动更新，大概处理处罚可以动态响应实时变乱的组件？这就是 useEffect 的用武之地！这个强大的钩子（Hook）就像是组件管理副作用和快速响应变化的秘笈。本日，我们就来探究一下 useEffect，相识它是怎样工作的、为什么我们需要它，并通过现实场景来展示你为什么会想用到 useEffect。那让我们开始吧！
我们可以把 useEffect 形貌为一个答应你运行副作用的 React Hook。很多人对副作用到底是什么有点狐疑。简单来说，副作用就是发生在 UI 渲染之外的代码行为。那么，我们详细是什么意思呢？打个比方，想象一下你正在做饭，厨房里有个定时器提示你什么时候该检查食品。在这个例子中，定时器的存在促使你定期检查食品，这就像是一个副作用——来自于一个紧张任务的举措结果。
在 React 中，这种概念同样实用。好比，大概需要在排行榜数据变更时获取新数据，以便向用户展示更新后的列表。为了阐明这一点，我们来看一个简单的代码示例：

1. import React, { useState, useEffect } from 'react';
3. function UserProfile({ userId }) {
4.   const [userData, setUserData] = useState(null);
6.   useEffect(() => {
7.     fetch(`https://api.example.com/user/${userId}`)
8.       .then(response => response.json())
9.       .then(data => setUserData(data));
10.   }, [userId]); // userId 是我们的依赖
12.   return (
13.     <div>
14.       {userData ? <h1>{userData.name}</h1> : <p>Loading...</p>}
15.     </div>
16.   );
17. }

复制代码

在这个例子中，我们通过 useEffect 来监听 userId 的变化，并在其变化时重新获取用户数据。
在深入相识 useEffect 工作原理之前，我们得先明确一点：在 React 引入 Hooks 之前，类组件是管理副作用和生命周期方法的紧张方式。开辟人员通过生命周期方法，好比 componentDidMount、componentDidUpdate 和 componentWillUnmount 来控制组件行为。但如今有了 useEffect，这个过程就变得简单多了。

1. useEffect(() => {
2.   // 在组件挂载时运行
3.   console.log('Component mounted!');
5.   return () => {
6.     // 在组件卸载时进行清理
7.     console.log('Component unmounted!');
8.   };
9. }, []); // 空数组表示这个 effect 只运行一次

复制代码

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

1. function WeatherApp({ location }) {
2.   const [weatherData, setWeatherData] = useState(null);
4.   useEffect(() => {
5.     fetch(`https://api.weather.com/v3/wx/conditions/current?geocode=${location}`)
6.       .then(response => response.json())
7.       .then(data => setWeatherData(data));
8.   }, [location]); // 注意 location 是我们的依赖
10.   return (
11.     <div>
12.       {weatherData ? <p>{weatherData.description}</p> : <p>Loading...</p>}
13.     </div>
14.   );
15. }

复制代码

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

1. useEffect(() => {
2.   const interval = setInterval(() => {
3.     fetchStockPrice();
4.   }, 1000);
6.   return () => clearInterval(interval); // 清理函数用于停止定时器
7. }, []);

复制代码

接下来，我们将讨论两个常见的使用 useEffect 的陷阱。
第一个要克制的陷阱是未检査依靠数组。假如你在 useEffect 中包罗了频仍变化的依靠变量，好比每 0.01 秒变化一次，而你在这个 effect 中举行 API 哀求，这会导致与 API 的过多调用，极大增长网络流量。比方：

1. useEffect(() => {
2.   const debounceFetch = setTimeout(() => {
3.     fetchData();
4.   }, 300); // 防抖时间设为 300 毫秒
6.   return () => clearTimeout(debounceFetch); // 清理函数用于取消延迟
8. }, [searchTerm]); // searchTerm 是可能频繁变化的变量

复制代码

第二个要克制的陷阱是忽视整理副作用的紧张性。想象你在开辟一个谈天应用，每位用户都要连接到服务器即时吸收消息：

1. useEffect(() => {
2.   const socket = new WebSocket('wss://chat.example.com');
4.   return () => {
5.     socket.close(); // 确保 `WebSocket` 连接在组件卸载时关闭
6.   };
7. }, []);

复制代码

每当在 useEffect 中处理处罚副作用时需制止或制止举行中的过程，肯定要使用整理函数。
这只是掌握 React 钩子的第二部分，后续我们会继承讨论 useContext、useRef、useCallback 等等，记得订阅以免错过这些出色内容，敬请等候接下来的发展！本日就到这里啦！