React/JavaScript 中的箭头函数答案

【问题标题】：Arrow Functions in React/JavaScriptReact/JavaScript 中的箭头函数
【发布时间】：2021-07-06 00:25:01
【问题描述】：

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

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


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

【问题讨论】：

这能回答你的问题吗？ When to call function vs function() in react onClick?
这个你也可以看看Correct use of arrow functions in React

标签： javascript reactjs ecmascript-6 arrow-functions

【解决方案1】：

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

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

如果您不使用类字段语法，则可以使用 arrow function in the callback。

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

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

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

【讨论】：