关于环境`this`的React的最佳实践 [英] Best practice in React regarding the context `this`
问题描述
以下哪项是关于React类组件性能的最佳做法:
Which of the following is the best practice with regard to performance in a React class component:
-
绑定回拨构造函数中的函数:
Binding a call back function in the constructor:
constructor(props)
{
/* some code */
this.onChange= this.onChange.bind(this)
}
render() {
return(
<div>
<input onChange={this.onChange}
</div>
);
}
onChange(event) {
/* some code involving 'this' */
}
使用箭头功能代替普通功能:
Using an arrow function instead of a normal function:
constructor(props)
{
/* some code */
}
render() {
return(
<div>
<input onChange={this.onChange}
</div>
);
}
onChange = (event) => {
/* some code involving 'this' */
}
坚持正常功能但在onChange字段中声明箭头功能:
Sticking to a normal function but declaring an arrow function in the onChange field:
constructor(props)
{
/* some code */
}
render() {
<div>
<input onChange={(event) => {this.onChange(event)}}
</div>
}
onChange(event) {
/* some code involving 'this' */
}
谢谢!
推荐答案
关于此
的所有3个选项都表现相同。
All 3 options, with regards to this
, behave the same.
选项3正在创建每个渲染的新功能,因此不如选项1和2(因为这种重新创建是不必要的,可能会妨碍性能)
Option 3 is creating a new function on every render and is thus less desired than options 1 and 2 (since such re-creation is unnecessary and could potentially hinder performance)
至于选项1 2,它们归结为相同的行为,与这个
的行为无关的轻微差异。
As far as options 1 and 2, they come down to the same behavior with slight differences unrelated to the behavior of this
.
诀窍理解为什么他们的行为与相同
是知道以下代码的作用:
The trick to understanding why they behave the same with this
is to know what the following code does:
method = () => {}
将方法添加到实例只是语法糖:
It's just syntactic sugar to add a method to an instance:
class A {
method = () => {}
}
// is the same as
class A {
constructor() {
this.method = () => {}
}
}
了解 Babel transiles it 。
由于箭头函数继承其定义的上下文为 this
,选项2的上下文是类本身。
Since an arrow function inherits the context it is defined in as this
, the context for option 2 is the class itself.
class A {
constructor() {
this.method = () => {
return this;
// ^^^^ this points to the instance of A
}
}
}
const a = new A();
console.log(a.method() === a); // true
选项1的内容相同:
class A {
constructor() {
this.method = this.method.bind(this);
}
method() {
return this;
// ^^^^ this points to the instance of A
}
}
const a = new A();
console.log(a.method() === a); // true
这意味着您的选择可归结为:
That means your options come down to the difference between:
// option 1
constructor(props) {
this.onChange = this.onChange.bind(this)
}
onChange() {
// code for onChange...
}
和
// option 2
constructor(props) {
this.onChange = () => /* code for onChange */
}
我将给予选项1的主要优势是它有一个命名函数而不是箭头函数,这使得在检查堆栈跟踪时调试更容易一些(尽管函数名称推断稍微淡化了这一点。)
The main advantage I would give to option 1 is that it has a named function instead of an arrow function, which makes debugging a bit easier when examining stack traces (although function name inferences dilutes this point a bit).
主要优势我会给选项2带来的是它看起来有点干净,就像在较不详细的代码中那样,但这是一种主观意见。
The main advantage I would give to option 2 is that it's a bit "cleaner" looking, as in less verbose, code but that is a subjective opinion.
总体而言,选项1和选项2几乎无动于衷。
Overall, option 1 and option 2 are practically indifferent.
这篇关于关于环境`this`的React的最佳实践的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!