React Hooks 是 React 16.8 中引入的一组新特性，可以让 React 函数组件拥有类组件的能力，同时使得组件逻辑复用更加容易。其中 useEffect 是 React Hooks 中最常用的钩子之一，它可以让你在函数组件中实现类似 componentDidMount 和 componentDidUpdate 的副作用操作。在本篇文章中，我们将详细讲解 useEffect 的使用方法以及使用场景。
useEffect 的基本用法
useEffect 接受两个参数：一个函数和一个可选的依赖数组。当组件渲染时，React 会执行第一个参数的函数，并将其添加到 Effect 队列中。当组件卸载时，React 会执行该函数的清理函数。
------ ------ - --------- --------- - ---- --------
-------- ------------- -
----- ------- --------- - ------------
------------ -- -
-- ------ --------
---------------- ------- -------- ---------
-- ------- --------
------ -- -- -
---------------------- ---- -----------
-
-- ---------
------ -
-----
------ ------- ------- ----------
------- ----------- -- -------------- - ----
----- --
---------
------
--
-上述代码定义了一个函数组件 MyComponent，其中包含状态 count 和修改状态的方法 setCount。当用户点击按钮时，会执行 setCount，并且触发 useEffect 中的 effect 函数。在这个函数中，我们简单地记录了点击次数。我们还定义了一个 cleanup 函数，当组件卸载时，该函数将被调用。注意，我们将 count 添加到 useEffect 的依赖数组中，这意味着，只有 count 发生变化时，才会重新执行 effect 函数。如果依赖数组为空，则 useEffect 会在组件每次渲染时都执行 effect 函数。
使用 useEffect 实现定时器
useEffect 本质上是 React 对 class 组件生命周期函数的模拟。通常情况下，我们可以使用它来执行一些副作用操作，比如获取数据、订阅事件、设置定时器等。下面是一个使用 useEffect 实现定时器的例子：
------ ------ - --------- --------- - ---- --------
-------- ------------- -
----- ------- --------- - ------------
------------ -- -
----- ----- - -------------- -- -
-------------- -- ----- - ---
-- ------
------ -- -- -
---------------------
--
-- ----
------ -
-----
--------------
------
--
-在上述代码中，我们使用了 useState 来维护一个计数器 count。在 useEffect 回调函数中，我们创建了一个定时器，并使用 setCount 方法更新计数器的值。注意，在这种情况下，我们将一个空数组作为 useEffect 的依赖项，这意味着 effect 函数仅在组件挂载时执行一次，并且在组件卸载时清理定时器。
使用 useEffect 处理组件延迟渲染
除了处理组件副作用以外，useEffect 还常用于处理组件渲染时需要经历延迟和异步操作的情况。例如，我们有一个页面需要从服务器获取某个数据，然后再进行渲染，而服务器的响应时间通常是不确定的。这时使用 useEffect 就可以很好地处理这种情况：
------ ------ - --------- --------- - ---- --------
-------- ------------- ------ -- -
----- ---------- ------------ - -------------
------------ -- -
----- --------- - ----- -- -- -
----- ---- - ----- ------------------------------
----- ---- - ----- ------------
------------------
--
------------
-- ----------
------ -
-----
------------------------
----------------------
------
--
-在上面的例子中，我们使用了 fetch API 去获取一个节点的信息。当组件渲染时，我们使用 useEffect 去调用 fetchData 函数，这个异步请求会返回节点信息，设置到 state 中去。有一点需要注意的是，useEffect 的第二个参数是一个数组，当数组中的元素发生变化时就会触发 useEffect 的回调函数重新执行。在这个例子中，我们将 fetch 的 API URL 作为参数传递给 useEffect，当 URL 发生变化时，useEffect 会重新执行回调函数，这能保证我们获取的信息总是最新的。
useEffect 的使用注意事项
虽然 useEffect 在处理组件副作用方面表现很好，但你还需要注意以下几点：
1. useEffect 可能会被执行多次
因为 useEffect 的回调函数会在每次组件渲染时执行，所以在其中定义的 state 同步操作可能会导致回调函数不断被执行。你可以使用 useCallback 或 useEffect 的第二个参数来避免这种情况。
2. useEffect 中的回调函数不支持 async/await 语法
虽然你可以将 async 函数作为 useEffect 的回调函数来使用，但是这种代码可能会导致一些奇怪的行为和错误。为了避免这种情况，最好使用 Promise 和 then/catch API 来代替 async/await 语法。
3. useEffect 中的 cleanup 函数可能无法完全执行
如果你的组件频繁调用 useEffect，那么 cleanup 函数可能无法完全执行，从而导致一些问题。为了避免这种问题，最好使用只调用一次的 API，例如 setTimeout 或 setInterval，这样 cleanup 函数才有可能被完整地执行。
结论
useEffect 是 React Hooks 中最常用的钩子之一，它是处理组件副作用的好帮手，能够模拟 class 组件的生命周期函数，并且由于其函数式的特点，可以帮助你实现很多复杂的操作，例如处理异步请求或定时器。在使用 useEffect 时，你需要注意一些细节问题，例如回调函数可能被多次执行、async/await 语法可能导致错误、cleanup 函数可能无法完全执行等。通过理解和使用 useEffect，你可以更好地处理 React 当中各种异步操作，为你的 React 应用提供更加稳定和可靠的基础设施。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b3e119babaf620faa2daa