React 中 useMemo 和 useEffect 的区别（计算与监听方面）

React 中 useMemo 和 useEffect 的区别（计算与监听方面）

useMemo 和 useEffect 是 React 中两个重要的 Hook，它们在计算和监听方面有显著的不同：

核心区别对比

特性	useMemo	useEffect
执行时机	在渲染期间同步执行	在渲染完成后异步执行
主要用途	缓存计算结果	处理副作用
返回值	返回计算结果	不返回值（可返回清理函数）
依赖变化时	立即重新计算	在下一次渲染后执行
对渲染的影响	参与当前渲染	不影响当前渲染，可能触发后续渲染

计算方面的区别

useMemo（用于计算）

function CalculateSum({ a, b }) {
  // 在渲染期间同步计算，结果直接用于渲染
  const sum = useMemo(() => {
    console.log('计算a+b');
    return a + b;
  }, [a, b]);

  return <div>总和: {sum}</div>;
}

特点：

• 计算是同步的，会阻塞渲染直到计算完成
• 计算结果直接参与当前渲染
• 适合需要立即使用计算结果的场景

useEffect（不适合纯计算）

function BadCalculateExample({ a, b }) {
  const [sum, setSum] = useState(0);
  
  // 错误用法：计算延迟，会导致额外渲染
  useEffect(() => {
    setSum(a + b);
  }, [a, b]);

  return <div>总和: {sum}</div>;
}

问题：

• 计算是异步的，会导致额外的渲染
• 不适合纯计算场景，更适合副作用操作

监听方面的区别

useEffect（用于监听变化）

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  // 监听userId变化，发起数据请求
  useEffect(() => {
    let isMounted = true;
    
    fetchUser(userId).then(data => {
      if (isMounted) setUser(data);
    });
    
    return () => { isMounted = false }; // 清理
  }, [userId]);

  return <div>{user?.name}</div>;
}

特点：

• 适合执行副作用（API调用、DOM操作等）
• 可以返回清理函数
• 不会阻塞渲染

useMemo（不适合副作用）

function BadWatchExample({ userId }) {
  // 错误用法：useMemo不应该用于副作用
  useMemo(() => {
    fetchUser(userId).then(/* ... */);
  }, [userId]);

  return <div>...</div>;
}

问题：

• React 不保证useMemo一定会执行
• 可能被跳过或延迟执行
• 违反Hook设计原则

正确使用场景示例

组合使用案例

function ProductPage({ productId }) {
  // 1. 用useMemo缓存计算结果
  const productDetails = useMemo(() => 
    calculateDetails(productId), 
    [productId]
  );

  // 2. 用useEffect处理副作用
  useEffect(() => {
    trackPageView(productId);
    return () => trackPageLeave(productId);
  }, [productId]);

  // 3. 用useMemo避免不必要渲染
  const recommendations = useMemo(() => 
    <Recommendations productId={productId} />,
    [productId]
  );

  return (
    <div>
      <ProductInfo data={productDetails} />
      {recommendations}
    </div>
  );
}

性能影响对比

useMemo 的性能影响

• 优点：避免重复计算，优化渲染性能
• 缺点：记忆化本身有内存开销，过度使用可能适得其反

useEffect 的性能影响

• 优点：不会阻塞渲染
• 缺点：异步执行可能导致状态不一致，过度使用会导致频繁的渲染循环

何时选择哪个Hook

使用 useMemo 当：

✅ 需要缓存昂贵的计算结果

✅ 需要稳定的对象引用以避免子组件不必要渲染

✅ 计算值需要在当前渲染中立即使用

使用 useEffect 当：

✅ 需要响应状态变化执行副作用

✅ 需要访问DOM或执行API调用

✅ 需要设置/清理定时器、事件监听器等

常见误区

1. 用 useEffect 做计算：

   // ❌ 错误：会导致额外渲染
   const [sum, setSum] = useState(0);
   useEffect(() => { setSum(a + b) }, [a, b]);
   
   // ✅ 正确：使用useMemo
   const sum = useMemo(() => a + b, [a, b]);

2. 用 useMemo 执行副作用：

   // ❌ 错误：副作用应使用useEffect
   useMemo(() => { fetchData() }, [dep]);
   
   // ✅ 正确
   useEffect(() => { fetchData() }, [dep]);

3. 过度使用 useMemo：

   // ❌ 不必要的记忆化
   const name = useMemo(() => user.name, [user]);
   
   // ✅ 直接使用即可
   const name = user.name;

总结

useMemo 和 useEffect 虽然都可以响应依赖变化，但设计目的完全不同：

• 计算优先用 useMemo：同步计算，立即影响渲染
• 监听优先用 useEffect：异步执行，处理副作用