如何理解react中
React 中的 useEffect 钩子
useEffect 是 React 中用于处理副作用的钩子，副作用包括数据获取、订阅、手动操作 DOM 等。它接受两个参数：一个副作用函数和一个依赖数组。
useEffect(() => {
// 副作用逻辑
return () => {
// 清理逻辑
};
}, [dependencies]);- 副作用函数：包含需要执行的副作用代码。
- 清理函数：返回的函数用于清理副作用，如取消订阅或清除定时器。
- 依赖数组：指定副作用重新运行的条件。如果依赖数组为空，副作用仅在组件挂载和卸载时运行。
使用场景
数据获取
useEffect(() => {
fetchData().then(data => setData(data));
}, []);订阅事件
useEffect(() => {
const subscription = eventSource.subscribe(handleEvent);
return () => subscription.unsubscribe();
}, []);手动操作 DOM
useEffect(() => {
const element = document.getElementById('target');
element.style.color = 'red';
}, []);依赖数组的作用
- 空数组：副作用仅在组件挂载和卸载时运行。
- 包含依赖项：当依赖项变化时，副作用重新运行。
- 省略依赖数组：副作用在每次渲染后运行。
清理机制
清理函数在组件卸载或依赖项变化时执行，确保资源释放和避免内存泄漏。
useEffect(() => {
const timer = setInterval(() => {}, 1000);
return () => clearInterval(timer);
}, []);注意事项
- 避免在副作用中直接修改状态，可能导致无限循环。
- 确保依赖数组包含所有副作用中使用的变量。
- 对于复杂逻辑，可以将副作用拆分为多个
useEffect。
示例：结合异步操作
useEffect(() => {
let isMounted = true;
fetchData().then(data => {
if (isMounted) setData(data);
});
return () => { isMounted = false; };
}, []);通过合理使用 useEffect，可以高效管理组件生命周期中的副作用。
