react副作用到底如何处理
React 副作用的基本概念
副作用指在组件渲染过程中，对外部世界产生影响的操作（如数据获取、订阅、手动修改DOM等）。React 的函数组件是纯函数，副作用需通过特定机制处理。
使用 useEffect 处理副作用
useEffect 是 React 提供的核心 Hook，用于在函数组件中执行副作用。其基本结构为：
useEffect(() => {
// 副作用逻辑
return () => {
// 清理逻辑（可选）
};
}, [dependencies]);- 无依赖数组：每次渲染后都执行。
- 空依赖数组
[]：仅在组件挂载和卸载时执行（类似componentDidMount和componentWillUnmount）。 - 带依赖项：依赖项变化时重新执行。
常见副作用场景及处理
数据获取
通过 useEffect 结合异步函数实现：
useEffect(() => {
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setState(data);
};
fetchData();
}, []); // 空依赖数组避免重复请求订阅与清理
需在 useEffect 中返回清理函数：
useEffect(() => {
const subscription = eventSource.subscribe(handleEvent);
return () => subscription.unsubscribe();
}, []);手动 DOM 操作
直接操作 DOM 时需确保在 useEffect 中执行：
useEffect(() => {
const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);
return () => button.removeEventListener('click', handleClick);
}, [handleClick]); // 依赖项避免内存泄漏避免无限循环
依赖项数组未正确设置可能导致无限重渲染。例如：
useEffect(() => {
setState(state + 1); // 依赖 state 但未正确处理
}, [state]); // 每次 state 变化触发重新执行解决方案：通过函数式更新或移除依赖项。
性能优化
- 依赖项精确性：确保依赖项仅包含必要变量。
useCallback和useMemo：缓存函数或值，避免不必要的副作用触发。- 拆分副作用：将不相关的副作用拆分为多个
useEffect。
替代方案
useLayoutEffect：在 DOM 更新后同步执行，适用于需要测量 DOM 的场景。- 第三方库：如
swr（数据获取）、react-query（状态管理）可简化副作用处理。
通过合理使用 useEffect 和依赖项控制，可以高效管理 React 组件的副作用。
