我知道箭头函数通过不重新创建每个呈现的函数（类似于构造函数中的绑定工作方式）来使事情更高效。
这不是真的。这取决于您在哪里使用箭头功能。如果
Arrowfunction在render方法中使用了它们，则它们将创建一个新的实例
everytimerender，就像
bind将如何工作一样。考虑这个例子
<div onClick={()=>{this.onClick()}}>Previous</div>在这里，每次渲染都被称为创建了一个匿名函数，该函数在调用时称为
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。这
proposed classfields for arrow functions不是ES6功能的一部分，
要了解您要询问的内容，您必须知道一个函数从调用位置获取其上下文。检查
thisquestion以了解更多信息。
在您的情况下，您曾经
Arrow function定义过
prevItem，因此可以获取封闭的React组件的上下文。
prevItem = () => { console.log("Div is clicked")}render(){ return ( <SecondClass prevItem={this.prevItem} /> )}现在在其子级中，即使您
prevItem使用任何自定义上下文调用
using bind or arrowfunction，
prevItem当在父级中执行时，ie
Main.js也将获取其封闭的React组件的上下文。并且由于您只希望执行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>因为它已经绑定在父级中。
现在，即使您必须从ThirdClass和SecondClass向这些函数传递一些其他数据，也不应直接使用
Arrow function或
bind inrender。看看这个答案
How to Avoid binding in Rendermethod
