useeffect 是 react 中用于处理副作用的 hook，它接受回调函数和依赖项数组两个参数。1. 回调函数在组件渲染后执行，用于处理数据获取、订阅事件等副作用；2. 依赖项数组控制回调执行时机，空数组表示仅首次执行，包含变量则在其变化时执行；3. 可以返回清理函数，在组件卸载或下一次 effect 执行前运行；4. 常见陷阱包括忘记添加依赖项导致闭包问题、添加不必要依赖项影响性能、循环依赖引发无限执行；5. 优化方式包括精确指定依赖项、使用 usecallback 和 usememo 缓存函数与对象、拆分逻辑到自定义 hook 或使用 uselayouteffect 控制执行时机；6. 异步操作需内部定义 async 函数并合理处理错误和清理请求，避免内存泄漏。
理解 useEffect，其实就是理解 React 组件中副作用的处理方式。它允许你在函数组件中执行副作用操作，比如数据获取、订阅事件、手动修改 DOM 等。
解决方案
useEffect 接受两个参数：一个回调函数和一个依赖项数组。
回调函数： 这个函数包含你要执行的副作用逻辑。它会在组件渲染后执行。
-
依赖项数组： 这个数组告诉 React 何时重新执行回调函数。
- 如果数组为空
[]，回调函数只会在组件首次渲染时执行一次。 - 如果数组中包含变量，当这些变量的值发生变化时，回调函数会重新执行。
- 如果省略依赖项数组，回调函数会在每次组件渲染后都执行。 （注意：这通常不是你想要的，因为它可能导致性能问题。）
- 如果数组为空
基本用法示例：
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
// 使用 document 的 title 来更新
document.title = `You clicked ${count} times`;
// 可选的清理函数
return () => {
// 在组件卸载或下次 effect 执行前运行
console.log('组件卸载或effect更新');
};
}, [count]); // 只有 count 改变时才会重新执行
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default Example;一些关键点：
-
useEffect在每次渲染 之后 运行。 浏览器已经更新了屏幕。 -
useEffect允许你“跳出” React 的纯渲染流程，执行一些会影响组件外部环境的操作。 - 可以有多个
useEffect钩子在一个组件中。 这允许你将不同的副作用逻辑分离到不同的 effect 中，提高代码的可读性和可维护性。 -
useEffect默认返回一个清理函数，用于在组件卸载或 effect 重新执行之前清理副作用。 例如，取消订阅、清除定时器等。 不返回清理函数也可以。
useEffect 的依赖项数组有什么常见的陷阱？
最常见的陷阱就是忘记添加依赖项，或者添加了不必要的依赖项。
忘记添加依赖项： 这会导致你的 effect 使用了过时的状态或 props。 例如，如果你的 effect 中使用了
count变量，但你没有将count添加到依赖项数组中，那么 effect 将始终使用count的初始值，即使count已经改变。 这会导致意想不到的错误。添加了不必要的依赖项： 这会导致你的 effect 在不必要的时候重新执行，降低性能。 例如，如果你的 effect 中使用了从 props 传递下来的一个对象，但你只需要使用这个对象的一个属性，那么你只需要将这个属性添加到依赖项数组中，而不是整个对象。 如果整个对象都添加到依赖项数组中，那么每次父组件重新渲染时，即使这个属性的值没有改变，你的 effect 也会重新执行。
-
循环依赖： 如果你的 effect 中更新了某个状态，而这个状态又被用作 effect 的依赖项，那么就会导致循环依赖。 例如：
const [value, setValue] = useState(0); useEffect(() => { setValue(value + 1); // 每次渲染都更新 value }, [value]); // value 是依赖项，导致 effect 无限循环执行这会导致组件无限循环渲染，最终导致浏览器崩溃。 要避免循环依赖，你需要仔细分析你的代码，找到导致循环依赖的原因，并采取措施解决它。 常见的解决方法包括使用
useCallback或useMemo来缓存函数或值，或者使用useRef来存储不需要触发重新渲染的值。
如何优化 useEffect 的性能？
优化 useEffect 的性能主要围绕着控制 effect 的执行时机和减少不必要的重新执行。
精确的依赖项数组： 这是最重要的一点。只添加 effect 真正依赖的状态或 props。避免添加不必要的依赖项，可以防止 effect 在不必要的时候重新执行。
-
使用
useCallback和useMemo： 如果你的 effect 依赖于一个函数或对象，而这个函数或对象是在每次渲染时都重新创建的，那么即使函数或对象的内容没有改变，effect 也会重新执行。 使用useCallback可以缓存函数，useMemo可以缓存计算结果。import React, { useState, useEffect, useCallback } from 'react'; function MyComponent({ data }) { const [count, setCount] = useState(0); // 使用 useCallback 缓存 handleData 函数 const handleData = useCallback(() => { console.log('处理数据', data); }, [data]); // 只有 data 改变时才重新创建 handleData useEffect(() => { handleData(); // 在 effect 中调用 handleData }, [handleData]); // 依赖于 handleData return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default MyComponent; -
函数式更新： 如果你的 effect 中需要更新状态，并且新的状态依赖于之前的状态，那么使用函数式更新可以避免使用过时的状态。
const [count, setCount] = useState(0); useEffect(() => { // 使用函数式更新，避免使用过时的 count 值 setCount(prevCount => prevCount + 1); }, []); // 只在组件首次渲染时执行 将复杂的逻辑拆分到自定义 Hook 中： 如果你的 effect 逻辑比较复杂，可以将其拆分到自定义 Hook 中。 这样可以提高代码的可读性和可维护性，并且可以更容易地复用 effect 逻辑。
使用
useLayoutEffect：useLayoutEffect与useEffect类似，但它是在浏览器完成布局和绘制 之前 同步执行的。 这意味着useLayoutEffect可以访问到最新的 DOM 布局信息。 但是，useLayoutEffect会阻塞浏览器的渲染，因此应该谨慎使用。 只有在需要在 DOM 更新后立即执行某些操作，并且这些操作会影响 DOM 布局的情况下，才应该使用useLayoutEffect。 通常情况下，useEffect已经足够满足需求。
useEffect 如何处理异步操作？
在 useEffect 中处理异步操作，最常见的就是数据获取。 你需要在 effect 中使用 async/await 或者 Promise 来处理异步操作。
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch('https://api.example.com/data');
const jsonData = await response.json();
setData(jsonData);
} catch (error) {
setError(error);
} finally {
setLoading(false);
}
};
fetchData();
// 可选的清理函数，例如取消未完成的请求
return () => {
// 在这里可以取消请求，例如使用 AbortController
};
}, []); // 空依赖项数组，只在组件首次渲染时执行
if (loading) {
return <p>Loading...</p>;
}
if (error) {
return <p>Error: {error.message}</p>;
}
return (
<div>
<p>Data: {JSON.stringify(data)}</p>
</div>
);
}
export default MyComponent;一些注意事项：
-
避免直接在
useEffect回调函数中使用async：useEffect的回调函数不应该返回 Promise。 如果你需要在 effect 中使用async/await，你需要定义一个内部的async函数，并在 effect 中调用它。 -
处理错误： 在异步操作中，一定要处理错误。 可以使用
try/catch语句来捕获错误，并更新状态来显示错误信息。 -
清理函数： 如果你的异步操作可能会在组件卸载后完成，那么你需要使用清理函数来取消未完成的请求。 例如，可以使用
AbortController来取消fetch请求。 这可以避免内存泄漏和一些潜在的问题。 - 加载状态： 在数据加载过程中，通常需要显示一个加载状态。 可以使用一个状态变量来表示加载状态，并在组件渲染时根据加载状态来显示不同的内容。
总的来说，useEffect 是 React 中一个非常强大的 Hook，可以让你在函数组件中执行各种副作用操作。 理解 useEffect 的工作原理，并掌握一些常见的用法和技巧，可以帮助你编写出更高效、更可靠的 React 代码。
