在React中正确使用箭头功能

我了解箭头函数通过不重新创建每个呈现的函数（类似于构造函数中的绑定方式）来使事情更高效。

这不是真的。这取决于您在哪里使用箭头功能。如果

Arrowfunction

在render方法中使用了它们，那么它们将创建一个新的实例

everytime

render，就像

bind

将如何工作一样。考虑这个例子

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

在这里，每次调用render都会创建一个匿名函数，而该函数在调用时会调用

this.onClick

。

但是考虑下面的情况

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

在上述情况下，arrow函数并非每次都重新创建函数，而是在

An arrow function does not have its own this;the this value of the enclosing execution context is used.

实例化该类时一次将上下文绑定到React组件。这类似于如何

binding works is constructor

。这是一部分，

proposedclass fields for arrow functions

不是ES6功能，

在您的情况下，您曾经

Arrow function

定义过

prevItem

，因此可以获取封闭的React组件的上下文。

prevItem = () => {    console.log("Div is clicked")}render(){    return (         <SecondClass prevItem={this.prevItem} />    )}

现在，在它的孩子，即使你调用

prevItem

任何自定义的背景下，

using bind or arrowfunction

，

prevItem

当父执行，即

Main.js

会得到其封闭的情况下作出反应的组成部分。而且由于您只希望执行prevItem函数，并且不想从子级传递任何数据到此，因此编写

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

和

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

根本没用而且由于在创建新的功能只会增加性能含义

SecondClass

和

ThirdClass

每次。您根本不需要将这些功能定义为箭头功能，而只需编写

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

和

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

因为它已经绑定在父级中。