子组件传入对象,父组件咋避免子组件更新?

作者站长头像
站长
· 阅读数 15

场景

我有一个父组件,里面包含一个子组件,子组件传入了一个对象,假设对象是字面量。当我的父组件更新时,子组件也会更新。导致不必要的渲染。

尝试

1.通过使用React.memo包裹子组件,作用是父组件更新,子组件只有当props变化才变化。结果发现还是不对。。。。分析了一下原因是,当父组件更新时候,传入到子组件的的引用发生了变化,虽然值是相同的。。。咋搞

回复
1个回答
avatar
test
2024-06-19

对象字面量在每次父组件更新的时候都会重新生成新的引用,导致子组件重新渲染。可以通过 useMemo 保持对象字面量引用恒定,再配合 React.memo 避免子组件的重新渲染。

const obj = useMemo(() => {
    return { name: 'xxx' }
},[])
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容