React/JavaScript 中的箭头函数

Question

我想了解下面的代码是如何工作的，两者之间有什么区别，以及它是如何在 React 应用程序中呈现的

          <button
            className="btn btn-outline-danger"
            onClick={() => onTestClick(test)}>
            Test
          </button>


          <button
            className="btn btn-outline-danger"
            onClick={onTestClick(test)}>
            Test
          </button>

Answer 1

说清楚，这是不是React-specific behavior；它是函数在 JavaScript 中工作方式的一部分。一般来说，如果你引用的方法后面没有()，比如onClick={this.handleClick}，你应该bind那个方法。

如果调用 bind 使您烦恼，有两种方法可以解决这个问题。如果您使用的是实验性 public class fields syntax，则可以使用 class 字段来正确绑定回调。

如果您不使用 class 字段语法，您可以使用 arrow function in the callback.

arrow function syntax 的问题是每次 button 呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为 prop 传递给较低的组件，则这些组件可能会执行额外的 re-rendering。我们通常建议在构造函数中绑定或使用 class 字段语法，以避免此类性能问题。

您可以在此处的文档中阅读更多相关信息：

https://reactjs.org/docs/handling-events.html

React/JavaScript 中的箭头函数

Arrow Functions in React/JavaScript

javascript

reactjs

ecmascript-6

arrow-functions