如何在不重新渲染组件的情况下更新react状态？

import React, { useState } from 'react';

const MyComponent = React.memo(({ value }) => {
  console.log('Rendering');
  return <div>{value}</div>;
});

const App = () => {
  const [value, setValue] = useState(0);

  const handleClick = () => {
    // 这里更新状态，但MyComponent不会重新渲染
    setValue(prevValue => prevValue + 1);
  };

  return (
    <div>
      <MyComponent value={value} />
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default App;

import React, { useRef } from 'react';

const MyComponent = () => {
  const valueRef = useRef(0);

  const handleClick = () => {
    // 更新ref的值，不会触发重新渲染
    valueRef.current += 1;
  };

  return (
    <div>
      <p>Value: {valueRef.current}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

import React from 'react';

class MyComponent extends React.Component {
  state = {
    value: 0,
  };

  shouldComponentUpdate(nextProps, nextState) {
    // 如果value没有变化，则不重新渲染
    return nextState.value !== this.state.value;
  }

  handleClick = () => {
    this.setState(prevState => ({
      value: prevState.value + 1,
    }));
  };

  render() {
    return (
      <div>
        <p>Value: {this.state.value}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}

export default MyComponent;