在React中正确使用箭头函数 [英] Correct use of arrow functions in React

问题描述

我正在使用ReactJS与Babel和Webpack并使用ES6以及建议的类字段用于箭头功能。据我所知，通过而不是箭头功能可以提高效率重新创建每个渲染的函数类似于构造函数中的绑定方式。但是，如果我正确使用它们，我并不是100％确定。以下是我的代码在三个不同文件中的简化部分。

I am using ReactJS with Babel and Webpack and using ES6 as well as the proposed class fields for arrow functions. I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the constructor works. However, I am not 100% sure if I am using them correctly. The following is a simplified section of my code in three different files.

我的代码：

Main.js

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

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

SecondClass.js

SecondClass.js

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

ThirdClass.js

ThirdClass.js

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

问题：

我的代码是否正确使用箭头功能？我注意到对于SecondClass.js我也可以使用：

Is my code above using the arrow functions correctly? I noticed that for SecondClass.js I could have also used:

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

由于我在原始函数中使用了ES6箭头函数，因此一种方法或另一种方法之间存在差异定义？或者我应该一直使用箭头语法直到我的最后一个div？

Is there a difference between one method or the other since I used an ES6 arrow function in my original function definition? Or should I be using the arrow syntax all the way through until my last div?

推荐答案

I理解箭头函数可以提高效率，而不是
重新创建每个渲染的函数，类似于
构造函数中的绑定方式。

I understand that arrow functions make things more efficient by not recreating the functions each render similar to how binding in the constructor works.

这不是真的。这取决于您使用Arrow功能的确切位置。如果在渲染方法中使用了箭头函数，那么它们每次都会创建一个新的实例 就像调用 bind 可行。考虑这个例子

This is not true. It depends on where exactly are you using the Arrow function. If Arrow function are used in render method, then they create a new instance everytime render is called just like how bind would work. Consider this example

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

这里每次调用render时都会创建一个匿名函数，调用该函数时调用 this.onClick 。

Here each time render is called an anonymous function is created and that function when called, calls this.onClick.

但请考虑以下情况

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

In在上面的例子中，箭头函数不会每次都重新创建函数，但是将上下文绑定到React组件为箭头函数没有自己的函数;在实例化类时，将使用封闭执行上下文的此值。。这类似于绑定工作原理是构造函数。这是箭头函数的建议类字段的一部分，它不是ES6功能，

In above case, the arrow function does not recreate function everytime, but binds the context to the React component as An arrow function does not have its own this; the this value of the enclosing execution context is used. once when the class is instantiated. This is similar to how binding works is constructor. This is a part of proposed class fields for arrow functions and it isn't a ES6 feature,

要理解你想要问的是，你必须知道一个函数从它被调用的地方获取它的上下文。查看 this问题 以获得更多理解。

To understand what you wish to ask, you must know that a function gets its context from where it is called. Check this question for more understanding.

在您的情况下，您使用了箭头功能定义 prevItem ，因此它获取了封闭的React组件的上下文。

In your case, you have used Arrow function to define prevItem and hence it gets the context of the enclosing React component.

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

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

现在它的孩子，甚至如果您使用任何自定义上下文调用 prevItem ，使用绑定或箭头函数， prevItem 在父级执行时，即 Main.js 将获取其封闭的React组件的上下文。因为你只想执行prevItem函数而不想从孩子那里传递任何数据，所以写

Now in its child, even if you call prevItem with any custom context, using bind or arrow function, prevItem when executed in parent i.e Main.js will get the context of its enclosing React component. And since you just wish to execute prevItem function and do not want to pass any data to this from the child, writing

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

和

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

简单无用，只会增加性能影响，因为新功能是在 SecondClass 和 ThirdClass 。您根本不需要将这些函数定义为箭头函数，只需编写

is simply useless and will only add to performance implication since new functions are created in SecondClass and ThirdClass everytime. You simply don't need to have these functions defined as arrow function and could just write

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

和

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

因为它已在父母中绑定。

since its already binded in the parent.

现在即使你必须从ThirdClass和SecondClass向这些函数传递一些额外的数据，你也不应该直接使用箭头函数或 bind in呈现。请访问 如何查看此答案避免在渲染方法中绑定

Now even if you have to pass some additional data to these function from ThirdClass and SecondClass, you shouldn't directly use Arrow function or bind in render. Have a look at this answer on How to Avoid binding in Render method

这篇关于在React中正确使用箭头函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！