React中为何省略回调会导致按钮失效？两种onClick写法解析

这个问题是React事件绑定里的经典坑，我来给你彻底讲明白：

核心差异：传「函数执行结果」 vs 传「函数本身」 #

首先得搞懂JS里函数调用的基本逻辑：

• 当你写this.restart()时，这是立即执行这个函数，并把它的返回值（你的restart()没有return语句，所以返回undefined）传给onClick属性。
• React的onClick需要接收一个函数引用，只有当用户点击按钮时才会调用这个函数。如果传给它undefined，点击自然不会有任何反应。

更糟的是，这种写法会导致组件每次渲染时都会自动执行restart()——比如页面加载、状态更新触发重渲染时，游戏都会被强制重启，这显然不是你想要的。

箭头函数写法为什么能正常工作？ #

<button onClick={() => this.restart()}>的本质是创建了一个匿名的回调函数：

• 这个匿名函数本身并没有立即执行，只是把它的引用传给了onClick。
• 只有当用户点击按钮时，React才会调用这个匿名函数，然后函数内部再去执行this.restart()。
• 另外，箭头函数会自动继承当前上下文的this，这里在render()里this指向Game组件实例，所以this.restart()能正确访问到组件的setState方法。

更优的替代写法 #

箭头函数虽然能用，但每次render()都会创建一个新的匿名函数，在复杂组件里可能影响性能。你可以参考代码里handleClick的写法，提前绑定this：

方法1：在constructor中绑定 #

在Game组件的构造函数里添加一行绑定代码：

constructor(props) {
  super(props)
  // ... 其他初始化代码
  this.handleClick = this.handleClick.bind(this)
  // 新增这行，绑定restart的this指向
  this.restart = this.restart.bind(this)
}

然后按钮就可以直接写：

<button onClick={this.restart}>Restart</button>

方法2：使用类字段语法（箭头函数定义方法） #

把restart方法改成箭头函数形式，这样this会自动绑定到组件实例：

restart = () => {
  var cells = [];
  for (let i = 0; i < 6; i++) {
    cells.push(new Array(7).fill(0));
  }
  this.setState({ player: false, cells: cells, winner: 0 })
}

同样可以直接用onClick={this.restart}。

总结一下 #

• 错误写法：onClick={this.restart()} → 立即执行函数，传递的是执行结果（undefined）
• 正确写法：传递函数引用（箭头函数包裹、提前bind、类字段箭头函数）→ 点击时才执行目标函数

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