在使用 React.memo 优化子组件时，若通过内联对象（如 { color: "green" }）传递 style prop，会导致每次父组件渲染都触发子组件重渲染。根本解法是确保传入的对象引用稳定，而非在子组件内部用 useMemo 修复。
在使用 react.memo 优化子组件时，若通过内联对象（如 `{ color: "green" }`）传递 style prop，会导致每次父组件渲染都触发子组件重渲染。根本解法是确保传入的对象引用稳定，而非在子组件内部用 `usememo` 修复。
当我们在父组件中这样写：
function Parent() {
return <child customstyle="{{" color:></child>;
}
每次 Parent 渲染时，{ color: "green" } 都会创建一个全新对象，其内存地址与上次不同。即使 Child 已用 React.memo 包裹，memo 的浅比较也会判定 CustomStyle prop 发生变化，从而强制重渲染——性能优化完全失效。
⚠️ 常见误区：在子组件内部对 prop 使用 useMemo
以下写法无效且危险：
const Child = React.memo(({ CustomStyle }) => {
// ❌ 错误：useMemo 在子组件内执行，无法阻止重渲染
// 且会始终返回首次渲染时的旧值，造成 UI 与 props 不一致
const stableStyle = React.useMemo(() => CustomStyle, []);
return <div style="{stableStyle}">Content</div>;
});
这段代码不仅无法避免重渲染（memo 已因 prop 变化而触发渲染），更会导致逻辑错误：stableStyle 永远锁定为第一次传入的值，后续 prop 更新将被静默忽略，UI 失去响应性。
✅ 正确做法：在父组件中保证 prop 引用稳定
方案一：使用 useMemo 在父组件中缓存对象（推荐）
适用于 style 依赖于某些动态值（如 props、state），但不希望每次渲染都新建对象：
function Parent({ isActive }) {
// ✅ 正确：仅当 isActive 改变时才重新计算 style
const customStyle = React.useMemo(
() => ({
color: isActive ? "green" : "gray",
fontWeight: isActive ? "bold" : "normal"
}),
[isActive] // 依赖数组精准控制更新时机
);
return <child customstyle="{customStyle}"></child>;
}
方案二：提升为模块级常量（最高效）
若 style 完全静态、无任何运行时依赖，直接定义为顶层常量：
// ✅ 最优：零开销，引用永远稳定
const GREEN_STYLE = { color: "green", fontSize: "16px" };
function Parent() {
return <child customstyle="{GREEN_STYLE}"></child>;
}
? 额外建议：
- 避免在 style 对象中嵌套函数或复杂计算（如 transform:translateX(${x}px)`）——应提前计算好字符串值；
- 若需高频更新样式（如动画），考虑使用 CSS-in-JS 库（如 Emotion）或原生 CSS 类名切换，而非动态 style 对象；
- 对于深层嵌套的 style 对象，可结合 useMemo + 结构化拆分（如分别 memoize color 和 font 子对象），但通常扁平化 style 更易维护。
总结：React.memo 的有效性完全取决于传入 prop 的引用稳定性。优化必须发生在数据源头（父组件），而非消费端（子组件）。稳定引用 + 精准依赖数组，才是高性能 React 组件的基石。
