请教一下前辈们一个 React 函数组件的性能优化问题

const Button = React.memo(({ onClick }) => {
  console.log('Button render')
  return <button onClick={(e) => onClick(e)}>+1</button>
});

function App() {
  const [count, setCount] = useState(0);
  
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count])
  
  return (
    <div>
      <h1>{count}</h1>
      <Button onClick={handleClick}>Click</Button>
    </div>
  )
}

每次点击按钮 App 组件肯定会重新渲染，但是也会导致 Button 组件重新渲染很显然这是没必要的。

如果在类组件中可以像下面这样做：

const Button = React.memo(({ onClick }) => {
  console.log('Button render')
  return <button onClick={(e) => onClick(e)}>+1</button>
});

class App extends Component {
  state = { count: 0 };

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <Button onClick={this.handleClick}>Click</Button>
      </div>
    )  
  }
}

这样无论点击按钮多少次，只有 App 组件会重新渲染，不会导致 Button 组件重新渲染。

请教一下前辈们在第一段代码里面怎么改才能实现上面这个效果。