我正在学习 React，并按照本教程创建了一个简单的井字游戏，您可以在 CodePen 中查看该游戏。
我对箭头函数如何在 Board 组件onClick的renderSquare函数内部返回的 Square 组件的属性中工作感到困惑：onClick={() => this.props.onClick(i)}。同样，我拥有的 Game 组件也同样如此onClick={ (i) => this.handleClick(i)}。我以为我可以在没有箭头函数的情况下编写它（就像onClick={this.handleClick(i)}），但这破坏了游戏。
onClick期待一个功能。箭头函数没有自己的this；使用this封闭执行上下文的值。箭头函数是以下的替代品
onClick={this.handleClick.bind(this,i)}
当你运行它时它不起作用
onClick={this.handleClick(i)}
因为在这种情况下，它将调用一个函数并传递一个返回值，该值将在每次调用渲染时进行评估。因此，如果您在 onClick 函数中执行某些导致重新渲染的操作，例如setState您的应用程序将进入无限循环。因此onClick需要一个函数而不是一个值，所以除非你从onClick处理程序返回一个函数，否则你不应该直接调用它。
上面的箭头函数起到将参数绑定到函数的作用