useMemo

最新推荐文章于 2025-06-17 11:07:09 发布

大莲芒

最新推荐文章于 2025-06-17 11:07:09 发布

阅读量459

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_34574204/article/details/109406448

本文探讨如何通过使用React的useMemo hook来减少函数Parent中child组件的不必要的重渲染，仅当依赖项变化时更新逻辑，提升应用性能。详细讲解了如何根据a和b的变动精准控制child1和child2的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

优化函数组件的重渲染问题，是判断组件中的函数逻辑是否重新执行，用来优化性能。

function Parent({ a, b }) {
  // 只有 a 变化的时候 child1 才会重新渲染
  const child1 = useMemo(() => <Child1 a={a} />, [a]);
  // 只有 b 变化的时候 child2 才会重新渲染
  const child2 = useMemo(() => <Child2 b={b} />, [b]);
  return (
    <>
      {child1}
      {child2}
    </>
  )
}