React高手都不知道？这10个useEffect隐藏技巧让你的应用性能飙升90%

作者：佚名时间：2025-11-17 12:34

字号

React 性能优化：10个90%开发者不知道的useEffect正确使用姿势

引言

在React生态中，useEffect是最常用的Hook之一，但也是性能问题的高发区。许多开发者在使用useEffect时容易陷入一些常见的陷阱，导致组件重复渲染、内存泄漏或逻辑混乱。本文将深入探讨10个容易被忽视的useEffect高级用法和优化技巧，帮助你在实际开发中避免性能瓶颈，提升应用流畅度。

主体

1. 依赖数组的精确控制

很多开发者习惯在依赖数组中随意填写变量，甚至直接忽略ESLint的警告。实际上，依赖数组的精确性直接影响useEffect的执行效率。

const fetchData = useCallback(() => {
  // 数据获取逻辑
}, [query]);
useEffect(() => {
  fetchData();
}, [fetchData]); // 仅当fetchData变化时执行

2. 避免在useEffect中直接调用异步函数

直接在useEffect中使用异步函数可能导致竞态条件（Race Condition）或内存泄漏。

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    const data = await api.fetch();
    if (isMounted) setData(data);
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

3. 合理使用空依赖数组

空依赖数组（）表示副作用仅在挂载时运行一次，但滥用会导致逻辑错误。

4. 副作用清理的重要性

许多开发者忽略清理函数（return语句），导致内存泄漏或事件监听堆积。

useEffect(() => {
  const timer = setInterval(() => {}, 1000);
  return () => clearInterval(timer);
}, []);

5. 避免在useEffect中同步更新状态

在useEffect中连续更新状态会触发多次渲染。

// Bad: 触发两次渲染
useEffect(() => {
  setName('Alice');
  setAge(25);
}, []);
// Good: 合并为一次更新
const [state, setState] = useState({ name: '', age: 0 });
useEffect(() => {
  setState({ name: 'Alice', age: 25 });
}, []);

6. 使用ref保存可变值避免重新执行副作用

通过useRef保存可变值（如定时器ID），可以避免将其加入依赖数组而触发副作用重新执行。

const timerRef = useRef(null);
useEffect(() => {
  timerRef.current = setInterval(() => {}, 1000);
  return () => clearInterval(timerRef.current);
}, []); // timerRef无需加入依赖项

7. 利用自定义Hook封装通用副作用逻辑

将复杂副作用逻辑提取为自定义Hook，提升代码复用性和可读性。例如封装数据请求：

function useFetch(url) {
  const [data, setData] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(url);
      setData(await res.json());
    };
    fetchData();
  }, [url]);
}

8. 谨慎处理对象/数组作为依赖项的问题

对象和数组每次渲染都会生成新的引用，直接作为依赖项会导致副作用频繁执行。

9. 避免在循环或条件中使用useEffect

虽然React允许在组件内多次调用Hook，但在循环或条件中使用会导致Hook执行顺序不一致，引发Bug。

// Bad: useEffect可能不会被执行
if (condition) {
 useEffect(() => {}, []);
}
// Good:确保每次渲染都按相同顺序调用Hook 
const shouldRun = condition; 
useEffect(() => { 
 if (shouldRun) { /*...*/ } 
}, [shouldRun]);

10.性能敏感场景考虑用 `layout effect`

某些DOM操作(如测量元素尺寸)需要在浏览器绘制前完成此时 layout effect更合适因为它会在浏览器绘制之前同步执行。

import { layout effect } from 'react'; 
function useElementSize(ref) { 
 layout effect(()=>{ 
   const size=ref.current.getBoundingClientRect(); 
   setSize(size); 
 },[]); 
}