--- theme: nico --- # 概念解释当我们谈论 React，我们通常在讨论纯函数组件，这意味着它们没有副作用。但在实际应用中，我们通常需要执行有副作用的操作，如数据获取、手动更改 DOM、设置订阅等。`useEffect`就是为此设计的。 useEffect的定义如下： ```jsx useEffect(setup, dependencies?) ``` `useEffect`接受两个参数： 1. **setup 函数**：这是包含我们的 Effect 逻辑的函数。setup 函数里还可以选择返回一个`cleanup`函数，`cleanup`函数会在组件卸载的时候执行。 1. **依赖数组（optional dependencies）** ：这是 setup 代码内部引用的所有响应式值的列表。响应式值包括 props、state 以及直接在组件主体中声明的所有变量和函数。依赖数组可以不传递、传空数组和非空数组。 # 用法详解 ## 基础使用最简单的用法，在`useEffect`函数组件中执行副作用（例如：数据获取、手动修改 DOM、订阅事件等）。 ```jsx import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `点击了 ${count} 次`; }); return (

点击了 {count} 次

); } ``` ## 不同的依赖数组的区别现在升级上面这个示例，来看看不同**依赖数组（optional dependencies）**有什么区别 ```jsx import React, { useState, useEffect } from 'react'; function Example() { const [leftCount, setLeftCount] = useState(0); const [rightCount, setRightCount] = useState(0); useEffect(() => { /** * This useEffect will be executed when: * 1、the component is mounted and unmounted. * 2、click left button. * 3、click right button. */ console.log(`Button left clicked ${leftCount} times`); document.title = `Button left clicked ${leftCount} times`; }); useEffect(() => { /** * This useEffect will be executed when: * 1、the component is mounted and unmounted. * 2、click right button. */ console.log(`Button right clicked ${rightCount} times`); }, [rightCount]); useEffect(() => { /** * This useEffect will be executed when: * 1、the component is mounted and unmounted. */ console.log(`I have a empty array of dependencies.`); }, []); return (

左按钮点击了 {leftCount} 次

右按钮点击了 {rightCount} 次

); } ``` 示例代码 TypeScript 版已发布到我的[Github](https://github.com/weijunext/nextjs-learn-demos/tree/useEffect)，演示Demo已发布到[我的示例站](https://nextjs.weijunext.com/hooks/useEffect) 这个示例中，我们写了3个`useEffect`，添加了不同的依赖数组，它们分别会有这样的表现： - 第一个`useEffect`没有添加依赖数组，它的触发时机有： - 组件挂载、卸载的时候 - 页面每一次`re-render`的时候，即`leftCount`和`rightCount`更新的时候，也是左按钮和右按钮点击的时候 - 第二个`useEffect`依赖数组添加了`rightCount`，它的触发时机有： - 组件挂载、卸载的时候 - `rightCount`触发的re-render的时候，即`rightCount`更新的时候，也是右按钮点击的时候 - 第三个useEffect依赖数组说空的，它的触发时机有： - 组件挂载、卸载的时候综上，我们只应该在必要的时候给`useEffect`添加依赖项，这样可以避免一些不必要的重新渲染。这个示例也说明了，在单个组件中允许使用多个`useEffect`，我们可以按照不同的关注点将副作用逻辑分开。 ## 清除函数的作用开篇我们还提到一个`cleanup`函数，cleanup函数只在组件卸载时执行，它的用法如下： ```jsx useEffect(() => { …… return () => { // 组件卸载会执行这里面的代码 }; }, []); ``` **应用场景1**:清除定时器如果你在`useEffect`中设置了一个定时器（如`setTimeout`或`setInterval`），在组件卸载前，你应该清除它，以防止它在组件不在 DOM 中时仍然执行。 ```jsx useEffect(() => { const timer = setInterval(() => { console.log('console once per second.'); }, 1000); return () => { clearInterval(timer); }; }, []); ``` **应用场景2**:事件监听器为全局对象（如`window`或`document`）或特定 DOM 元素添加的事件监听器应当在组件卸载或不再需要它们时被移除。 ```jsx useEffect(() => { const handleResize = () => { console.log("Window resized!"); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); }; }, []); ``` **应用场景3**:WebSockets聊天室当使用 WebSockets 或其他实时通信技术时，你可能会在组件加载时建立一个连接，而在组件卸载时需要断开这个连接。 ```jsx useEffect(() => { const socket = new WebSocket('ws://weijunext.com/socket'); socket.onmessage = (event) => { console.log(event.data); }; return () => { socket.close(); }; }, []); ``` **应用场景4**:请求的取消对于可能在组件卸载后才完成的异步请求（如使用 Axios 发起的 HTTP 请求），你应该在组件卸载前取消它们，以防止设置已卸载组件的状态。 ```jsx useEffect(() => { const source = axios.CancelToken.source(); axios.get('/api/some-endpoint', { cancelToken: source.token }) .then(response => { console.log(response.data); }) .catch(error => { if (axios.isCancel(error)) { console.log('Request cancelled'); } else { console.error(error); } }); return () => { source.cancel('Component unmounted'); }; }, []); ``` **应用场景5**:DOM 直接操作和第三方 DOM 库如果使用了直接操作 DOM 的方法或使用了如 D3、animation 这样的第三方库来操作 DOM，你可能需要在组件卸载时清理或还原某些操作。 ```jsx useEffect(() => { const animation = new FadeInAnimation(ref.current); animation.start(1000); return () => { animation.stop(); }; }, []); ``` ## ****跳过初始渲染**** 在某些情况下，当组件首次渲染时，我们不希望立即执行某些操作。这些操作可能包括发送网络请求、触发某些动画或其他任务。而是只有在某个值或依赖项发生变化后，我们才希望执行这些任务。假设我们有一个`count`状态，我们希望当`count`值发生变化时显示一个通知，但不希望在组件首次加载时显示这个通知。 ```jsx import React, { useState, useEffect, useRef } from 'react'; function Counter() { const [count, setCount] = useState(0); const mounted = useRef(false); useEffect(() => { if (mounted.current) { alert('Count value changed!'); } else { mounted.current = true; } }, [count]); return (

Count: {count}

); } export default Counter; ``` 这个示例中，当用户点击 Increase 按钮增加`count`值时，会出现一个通知。但是在页面首次加载时，不会有任何通知出现。 # 结语 `useEffect`是一个常用的 hook，正因为常用容易让开发者忽略了其中的使用细节，本文主要针对用法细节进行梳理，希望对大家有帮助。 # 专栏资源专栏博客地址：[👉 精读React Hooks](https://juejin.cn/column/7274211579691319311) 专栏演示站：[👉 React Hooks Demos](https://nextjs.weijunext.com/hooks) 专栏源码仓库：👉[Github - Source Code](https://github.com/weijunext/nextjs-learn-demos) 国内镜像仓库：👉[Gitee — Source Code](https://gitee.com/bigye-cheng-pu/nextjs-learn-demos) 交个朋友：👉[加入「独立全栈交流群」](https://juejin.cn/pin/7295644677742739466) 专栏文章列表： [精读React hooks（一）：useState 的几个基础用法和进阶技巧](https://juejin.cn/post/7274211579691335695) [精读React hooks（二）：React状态管理的强大工具——useReducer](https://juejin.cn/post/7274789845754445859) [精读React hooks（三）：useContext从基础应用到性能优化](https://juejin.cn/post/7275214254096728116) [精读React hooks（四）：useRef的多维用途](https://juejin.cn/post/7275563321617367059) [精读React hooks（五）：useEffect使用细节知多少？](https://juejin.cn/post/7275943591410712634) [精读React hooks（六）：useLayoutEffect解决了什么问题？](https://juejin.cn/post/7276366308601806885) [精读React hooks（七）：用useMemo来减少性能开销](https://juejin.cn/post/7277218424689672253) [精读React hooks（八）：我们为什么需要useCallback](https://juejin.cn/post/7277799132109176893) [精读React hook（九）：使用useTransition进行非阻塞渲染](https://juejin.cn/post/7278583672402837558) [精读React hooks（十）：使用useDeferredValue来做状态延迟更新](https://juejin.cn/post/7278918966213378059) [精读React hooks（十一）：useInsertionEffect——CSS-in-JS样式注入新方式](https://juejin.cn/post/7278953365224095798) [精读React hooks（十二）：使用useImperativeHandle能获得什么能力](https://juejin.cn/post/7279242388999372854) [精读React hooks（十三）：使用useSyncExternalStore获取实时数据](https://juejin.cn/post/7280089897548005388) [精读React hooks（十四）：总有一天你会需要useId为你生成唯一id](https://juejin.cn/post/7280436247746002963) [精读React hooks（十五）：把useDebugValue加入你的React调试工具库](https://juejin.cn/post/7280745727176212539) [精读React hooks（十六）：一个为代码优雅而生的hook——use](https://juejin.cn/post/7280975586902163468)