React中使用useMemo仍无法阻止背景色重渲染？如何缓存初始颜色？

你当前的代码问题在于：newBackgroundColor()写在组件函数的顶层，每次组件重渲染都会执行这个函数，所以即使你用了useMemo，它返回的其实是每次重渲染新生成的颜色，根本没起到缓存效果。

下面是两种可行的缓存方案：

方案一：使用useState（推荐） #

利用useState的初始化函数特性，让颜色只在组件首次挂载时生成一次：

// 初始化函数仅在组件首次挂载时执行
const [backgroundColor] = React.useState(() => newBackgroundColor());

const buttonStyle: React.CSSProperties = {
  background: backgroundColor,
};

return <button style={buttonStyle}>按钮</button>;

原理：useState接收的初始化函数（箭头函数形式）只会在组件第一次渲染时运行，后续重渲染会直接复用之前保存的状态值，不会再调用newBackgroundColor()。

方案二：使用useRef #

如果不需要通过颜色变化触发组件重渲染，可以用useRef来缓存值：

const colorRef = React.useRef<string | null>(null);

// 仅在首次渲染时生成颜色
if (!colorRef.current) {
  colorRef.current = newBackgroundColor();
}

const buttonStyle: React.CSSProperties = {
  background: colorRef.current,
};

return <button style={buttonStyle}>按钮</button>;

原理：useRef的current属性在组件整个生命周期内保持引用，不会随重渲染重置。首次渲染时current为空，生成颜色并赋值；后续重渲染时current已有值，跳过生成逻辑。

内容的提问来源于stack exchange，提问作者curiousMonk