Javascript React中箭头函数的正确使用

我将ReactJS与Babel和Webpack一起使用，并使用ES6以及for arrow函数。我理解，箭头函数通过类似于构造函数中绑定的工作方式，使事情更加高效。但是，我不能100%确定我是否正确使用了它们。下面是我的代码在三个不同文件中的简化部分

我的代码：

Main.js

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

previitem=（）=>{
log（“单击Div”）
}
render（）{
返回(
)
}

SecondClass.js

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

this.props.previItem（）}/>

ThirdClass.js

<div onClick={()=>{this.props.onClick()}}>Previous</div>

{this.props.onClick（）}>Previous

问题：

上面的代码是否正确使用了箭头函数？我注意到，对于SecondClass.js，我还可以使用：

<ThirdClass type="prev" onClick={this.props.prevItem} />

---

因为我在最初的函数定义中使用了ES6 arrow函数，所以一种方法和另一种方法之间有区别吗？或者我应该一直使用箭头语法直到我的最后一个div吗？

在原始函数定义中使用箭头允许您不在构造函数中绑定函数

如果你没有使用箭头

prevItem(){
  console.log("Div is clicked")
}

然后你必须创建一个构造函数并将其绑定到那里

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.prevItem = this.prevItem.bind(this)
  }

  prevItem() { ... }
}

当您开始使用时，使用箭头会更容易，因为它只起作用，您不必了解构造函数是什么，也不必深入研究javascript中

这个

的复杂性

---

但是，在性能方面，最好在构造函数中绑定。即使多次调用render方法，bind-in-constructor方法也会创建函数的单个实例并重新使用它。

因此，您的第一种方法

<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

this.props.previItem（）}/>

在这种情况下，您可以将ThirdClass中可用的任何参数传递给PreviItem函数。这是用参数调用父函数的好方法

<ThirdClass type="prev" onClick={()=>this.props.prevItem(firstArgument, secondArgument)} />

this.props.previItem（第一个参数，第二个参数）}/>

你的第二个方法是

<ThirdClass type="prev" onClick={this.props.prevItem} />

这种方法不允许传递任何特定于第三类的参数

这两种方法都是对的，只是，这取决于你的用途 案例这两种方法都使用es6箭头函数，并且在上面提到的方法中都是正确的 各自的情景

我知道箭头函数通过不使用 每次引用函数时重新创建它们

箭头函数以词法的方式处理

这个
上下文，而“normal”函数就是这样做的。我写过如果你需要更多的信息

在这两个内联箭头函数示例中，您正在每个
渲染
上创建一个新函数实例

这将在每个渲染上创建并传递一个新实例

onClick={() => {}}

在第三个示例中，您只有一个实例。

这仅传递对已存在实例的引用

onClick={this.myHandler}


至于arrow函数作为类字段的好处（有一个小的反面，我将在答案的底部发布），如果您有一个普通的函数处理程序，需要通过
this
访问
类的当前实例：

myHandler(){
  //  this.setState(...)
}

您将需要显式地
将它绑定到
类


最常见的方法是在
构造函数中执行，因为它只运行一次：

constructor(props){
  super(props);
  this.myHandler = this.myHandler.bind(this);
}

但是，如果使用arrow函数作为处理程序，则不需要将它绑定到
类，因为如上所述，arrow函数使用
此
的词法上下文：

myHandler = () => {
  //  this.setState(...)
}

对于这两种方法，您将使用如下处理程序：

<div onClick={this.myHandler}></div> 



我知道箭头函数通过不使用
重新创建每个函数的呈现方式类似于
建造师工作

事实并非如此。这取决于您使用箭头函数的确切位置。如果在render方法中使用了
箭头函数
，那么每次调用
render时，它们都会创建一个新实例，就像
绑定
一样。考虑这个例子

<div onClick={()=>{this.onClick()}}>Previous</div>

在上述情况下，arrow函数不会每次都重新创建函数，而是将上下文绑定到React组件，因为arrow函数没有自己的函数；在实例化类时，将使用封闭执行上下文的此值。
一次。这类似于
绑定是如何工作的。这是箭头函数的
建议类字段的一部分，不是ES6功能

要理解您希望询问的内容，您必须知道函数从调用它的位置获取其上下文。检查是否有更多的了解

在您的例子中，您使用了
箭头函数
来定义
previitem
，因此它获得了封闭的React组件的上下文

prevItem = () => {
    console.log("Div is clicked")
}

render(){
    return (
         <SecondClass prevItem={this.prevItem} />
    )
}

及

及

上一个

因为它已经绑定在父级中

现在，即使您必须从ThirdClass和SecondClass向这些函数传递一些附加数据，也不应该在render中直接使用
箭头函数
或
绑定。使用
JavaScript
curring函数声明查看此答案，可能与其他答案不同，请注意以下代码：

clickHandler = someData => e => this.setState({
  stateKey: someData
});

现在在
JSX
中，您可以编写：

<div onClick={this.clickHandler('someData')} />

它不需要
e
，所以我为什么要写它。
这里有更多的细节。
onClick={this.props.previitem}
这里因为
previitem
中没有对
this
的引用，所以您可以使用它。但如果您添加范围级别的代码，它将中断。由于您是从对象分配函数并调用它，因此它会释放其上下文。仅供参考，类字段不属于ES6的一部分。使用这种方法，调用PreviItem时是否有方法添加参数。例如：
onpress={this.previitem}
但是我想调用
this.previitem(
<ThirdClass type="prev" onClick={()=>this.props.prevItem()} />

<div onClick={()=>{this.props.onClick()}}>Previous</div>

<ThirdClass type="prev" onClick={this.props.prevItem} />

<div onClick={this.props.onClick}>Previous</div>

clickHandler = someData => e => this.setState({
  stateKey: someData
});

<div onClick={this.clickHandler('someData')} />

clickHandler = someData => () => this.setState({
  stateKey: someData
});