在 React 中正确使用箭头功能

我正在将ReactJS与Babel和Webpack一起使用,并使用ES6以及针对箭头功能的建议类字段。我知道箭头函数通过不重新创建每个呈现的函数(类似于构造函数中的绑定工作方式)来使事情更高效。但是,我不确定100%是否正确使用了它们。以下是我的代码在三个不同文件中的简化部分。

我的代码:

Main.js

prevItem = () => {

console.log("Div is clicked")

}

render(){

return (

<SecondClass prevItem={this.prevItem} />

)

}

SecondClass.js

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

ThirdClass.js

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

题:

我上面的代码使用箭头功能是否正确?我注意到,对于SecondClass.js,我还可以使用:

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

自从我在原始函数定义中使用ES6箭头函数以来,一种方法或另一种方法之间有区别吗?还是应该一直使用箭头语法,直到最后一个div?

回答:

我知道箭头函数通过不重新创建每个呈现的函数(类似于构造函数中的绑定工作方式)来使事情更高效。

这不是真的。这取决于您在哪里使用箭头功能。如果Arrow function在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 class fields for arrow functions不是ES6功能的一部分,

要了解您要询问的内容,您必须知道一个函数从调用位置获取其上下文。检查this question以了解更多信息。

在您的情况下,您曾经Arrow function定义过prevItem,因此可以获取封闭的React组件的上下文。

prevItem = () => {

console.log("Div is clicked")

}

render(){

return (

<SecondClass prevItem={this.prevItem} />

)

}

现在在其子级中,即使您prevItem使用任何自定义上下文调用using bind or arrow function,prevItem当在父级中执行时,ieMain.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>

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

现在,即使您必须从ThirdClassSecondClass向这些函数传递一些其他数据,也不应直接使用Arrow functionbind in render

以上是 在 React 中正确使用箭头功能 的全部内容, 来源链接: utcz.com/qa/409701.html

回到顶部