子组件传入对象，父组件咋避免子组件更新？

Question

场景

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

尝试

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

Answer 1

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

const obj = useMemo(() => {
    return { name: 'xxx' }
},[])