当前位置：首页 > news >正文

React Hooks 中的 useEffect（副作用）

news 2025/8/4 9:48:06

useEffect 是什么？

useEffect 是一个 React Hook，它允许你将组件与外部系统同步

当我们在 React 中使用 useEffect 这个 Hook 时，实际上是在告诉 React 在特定情况下执行我们定义的副作用函数。这种副作用函数可以处理一些与组件渲染结果无关的操作，例如数据获取、订阅事件、手动操作 DOM 等。

副作用函数作为 useEffect 的第一个参数传入。每当组件更新并重新渲染时，React 都会检查是否有副作用函数需要执行。但是，如果你想控制副作用函数的执行时机，可以传入第二个参数，这个参数是一个依赖数组。只有当依赖数组中的值发生变化时，副作用函数才会执行。

如果将依赖数组设置为空数组：[]，副作用函数将仅在组件第一次渲染时执行。这对于只需要执行一次的副作用操作非常有用，比如进行初始化的数据获取或订阅事件。

 // 挂载时执行，页面创建时只执行一次useEffect(() => {console.log("建立游戏连接");}, []);

如果依赖数组中包含某个值：[value]，副作用函数将在组件首次渲染时执行，以及该值发生变化时执行。这对于根据特定值来执行操作非常有用，比如根据输入值来查询数据。

 // 更新时，当监听的依赖项变动时触发useEffect(() => {console.log("当前游戏为：", optionValue);}, [optionValue]);

如果不传递依赖数组，副作用函数将在每次组件重新渲染时都会执行。这可以用来处理具备实时更新需求的副作用操作，比如实时订阅数据或通过 WebSocket 接收数据。
销毁时执行

 // 销毁时useEffect(() => {return () => {console.log("已断开连接");};}, []);

生命周期钩子函数为主执行：分别在每个钩子函数中，实现一个完整功能的部分效果

以功能为主执行：一个功能的所有效果放在一起实现

在开发中更常用的是【以功能为主执行】，将代码整合，放在一起

 useEffect(() => {console.log("1 建立游戏连接：", optionValue, num, str);return () => {console.log("2 断开游戏连接：", optionValue);};}, [optionValue, num, str]);

它的执行流程为：1挂载：1 2更新：21 3卸载：2

需要作为依赖项的值：Effect 中用到的可变的值，比如：prpos/state/组件内创建的变量等
不需要则作为依赖项的值：组件外创建或导入的变量、函数的等

总的来说 useEffect 是 React 提供的一个 Hook，用于处理副作用操作。它的主要功能可以总结如下：

定义副作用函数：通过 useEffect，我们可以定义一个副作用函数，用于执行与渲染无关的操作。副作用函数可以包含任意代码，比如数据获取、订阅事件、手动操作 DOM 等。
控制副作用函数的执行时机：useEffect 的第一个参数是副作用函数。每当组件完成渲染后，React 就会检查是否需要执行副作用函数。通过传递一个依赖数组作为 useEffect 的第二个参数，可以控制副作用函数的执行时机。
组件挂载时执行副作用函数：当组件首次渲染时，副作用函数会被执行一次。这对于一些初始化操作非常有用，比如进行数据获取、订阅事件等。
组件更新时重新执行副作用函数：如果依赖数组中的任何依赖项发生变化，副作用函数会被重新执行。这使得我们可以根据特定的值或状态来更新副作用操作，以保持与组件的同步。
组件卸载时执行清理操作：如果我们在副作用函数中返回一个清理函数，它将在组件卸载时被调用。这可以用来取消订阅、清除定时器或执行其他必要的清理操作。

通过使用 useEffect，我们可以在函数式组件中处理副作用操作，并且能够灵活地控制这些操作的执行时机和清理。这为我们提供了一种方便的方式来管理组件的副作用，使得代码更简洁、可维护。

在使用它的依赖项时应注意当使用 useEffect 时，我们应该根据具体开发场景来注意依赖项的设置。以下是一些常见开发场景和相应的依赖项注意事项：

数据获取和异步操作：
- 如果副作用函数需要使用组件内部的状态或属性来触发数据获取，那么在依赖项中包含这些相关的状态或属性。
- 如果数据获取是通过网络请求等异步操作进行的，需要确保依赖项不会在每次数据更新时重新触发数据获取。可以使用 useEffect 的清理函数来取消之前的请求。
监听事件或订阅：
- 如果副作用函数需要监听全局事件或进行订阅，需要在依赖项中包含相关的事件或订阅源。
- 在清理函数中，需要取消事件监听或取消订阅，以避免内存泄漏。
使用第三方库或外部资源：
- 如果副作用函数使用了第三方库或外部资源（比如地图、音频等），需要根据文档或库提供的使用方式设置依赖项。
- 在清理函数中，需要进行资源释放或销毁操作，以确保不会出现资源泄漏或内存溢出。
组件内部状态更新：
- 如果副作用函数中使用了组件内部的状态，并且希望在状态更新时重新执行副作用函数，需要在依赖项中包含这些状态。
- 需要注意避免创建闭包陷阱，可以使用 useCallback 或函数式更新来确保正确的依赖项设置。
优化性能：
- 如果副作用函数不依赖任何值或状态，且其效果可以被忽略，可以省略依赖项，以避免不必要的重复执行。
- 如果副作用函数只需要在组件挂载和卸载时执行一次，可以将依赖项设置为空数组 []。