Fatal编程技术网

React/JavaScript中的箭头函数

javascript reactjs ecmascript-6

React/JavaScript中的箭头函数,javascript,reactjs,ecmascript-6,arrow-functions,Javascript,Reactjs,Ecmascript 6,Arrow Functions,我想了解下面的代码是如何工作的，它们之间的区别是什么，以及它们是如何在react应用程序中呈现的 <button className="btn btn-outline-danger" onClick={() => onTestClick(test)}> Test </button> <button

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

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


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

onTestClick（test）}>
试验
试验
明确地说，这是而不是
反应特定行为
；它是函数如何在
JavaScript
中工作的一部分。通常，如果引用的方法后面没有
（）
，例如
onClick={this.handleClick}​
，您应该绑定该方法

如果打电话给bind会让你烦恼，有两种方法可以解决这个问题。如果您使用的是实验性的
公共类字段语法
，则可以使用类字段正确绑定回调

如果不使用类字段语法，可以在回调中使用
箭头函数


箭头函数语法的问题在于每次呈现
按钮时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为
道具
传递给较低的组件，则这些组件可能会执行额外的
重新渲染
。我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题

您可以在他们的文档中阅读更多信息：


这是否回答了您的问题？你也可以看看这个