传递样式对象作为props致子组件重渲染，子组件用useMemo是否可行？

你当前方法的问题 #

你在子组件里用useMemo(() => CustomStyle, [])会引发意外行为：
因为依赖数组是空的，这意味着子组件只会在第一次渲染时保留CustomStyle的引用，后续哪怕父组件传递了更新后的CustomStyle（比如颜色从green改成red），子组件也不会感知到props变化，始终使用初始的样式，导致UI无法同步更新。

无需额外依赖的优化方案 #

1. 父组件内缓存对象引用 #

在父组件里用useMemo把样式对象缓存起来，保证每次父组件渲染时都是同一个引用：

function Parent(){
  const customStyle = useMemo(() => ({ color: "green" }), []);
  return <Child CustomStyle={customStyle} />;
}

如果样式里的属性依赖父组件的状态，把对应的状态变量加到useMemo的依赖数组里即可，比如[themeColor]。

2. 拆分对象为基础类型Props #

如果样式属性不多，直接把单个属性作为props传递，基础类型（字符串、数字等）的比较是值比较，memo能正确识别未变化的props：

// 父组件
function Parent(){
  return <Child color="green" />;
}

// 子组件
const Child = memo(({ color }) => {
  const customStyle = { color };
  return (...);
});

3. 把固定样式定义在组件外部 #

如果这个样式是完全固定、不会变化的，直接把对象定义在父组件外面，避免每次渲染创建新对象：

const customStyle = { color: "green" };

function Parent(){
  return <Child CustomStyle={customStyle} />;
}

问题根源回顾 #

父组件每次渲染时都会创建一个新的{ color:"green" }对象，虽然内容相同，但引用地址不同。memo默认做浅比较，会认为Props发生了变化，因此触发子组件重渲染。

内容的提问来源于stack exchange，提问作者Manas R. Makde