如何防止在React中重新渲染随机颜色

const MyComponent = React.memo(props => {
  // 组件的渲染逻辑
});

// 使用React.memo()包装组件
export default React.memo(MyComponent);

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据属性或状态的变化来判断是否重新渲染
    if (this.props.color === nextProps.color) {
      return false;
    }
    return true;
  }

  render() {
    // 组件的渲染逻辑
  }
}

const MyComponent = () => {
  const [color, setColor] = React.useState(getRandomColor());

  // 使用React.useMemo()缓存计算结果
  const style = React.useMemo(() => {
    return { backgroundColor: color };
  }, [color]);

  return (
    <div style={style}>
      {/* 组件的渲染内容 */}
    </div>
  );
};