两者都可以工作，在这种情况下，两者在功能上几乎相同。
在第一个示例中，您直接将函数引用传递给onClick

<button onClick={handleChange}>Change Text</button>

在第二个示例中，将 * anonymous * 函数传递给onClick。调用时，该匿名函数将调用handleChange

<button onClick={() => handleChange()}>Change Text</button>

除非你得到了一些你不想传递给handleChange的参数，否则我建议不要像你的第二个例子那样把它 Package 在一个匿名函数中。没有任何好处。就在头顶上。

在第二个例子中，你创建了两个函数，我们通常希望这样做，以防我们想把动态数据传递给内部函数。
比如说，
在这个例子中，我们传递了一个函数引用：

function App() {
    const handleChange = (event) => {
        // You have access to the click event object
        handleTextChange('Button handler clicked');
    }       

    return (
       <>
        <span>{text}</span>
        <button onClick={handleChange}>Change Text</button>
       </>
    )
}

但是，假设你想添加一个动态数据，例如在循环中迭代时，你想传递每个项目的索引：

function App() {
  const [text, handleTextChange] = useState('Some Text');

  const handleChange = (event, item) => {
    // we have access to both the event object and the specific item in the list
  };

  return items.map(item => {
    return (
      <div key={item}>
        <span>{text}</span>
        <button onClick={event => handleChange(event, item)}>
          Change Text
        </button>
      </div>
    );
  });
}