[英]Why binding is needed in ES6 react classes
In new React ES6 classes this
needs to be binded as stated here: http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding for eg:在新的 React ES6 类中,
this
需要按照此处所述进行绑定: http : //facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding例如:
class Counter extends React.Component {
constructor() {
super();
this.tick = this.tick.bind(this);
}
tick() {
...
}
...
}
The explanation for this is because it's the default behaviour, however if I make an ES6 class and then I make a new instance of it this
will be binded对此的解释是因为这是默认行为,但是如果我创建一个 ES6 类,然后创建它的新实例,
this
将被绑定
import React from 'React'
class Test extends React.Component {
constructor() {
super()
}
foo () {
console.log('bar')
}
hello() {
this.foo()
}
}
var test = new Test()
test.hello()
// > bar
Why binding is needed in React then?为什么 React 中需要绑定呢?
You need set this
to methods in case, for example, if you need pass function reference to event handlers, however you don't need set this
for every method.,你需要设置
this
情况下的方法,例如,如果你需要传递函数引用到事件处理程序,但你不需要设置this
每个方法,
class Counter extends React.Component {
constructor() {
super();
this.tick = this.tick.bind(this);
}
tick() {
// this refers to Counter
}
fn() {
// this refers to Counter
}
withoutBind() {
// this will be undefined or window it depends if you use "strict mode" or not
}
render() {
this.fn(); // this inside this method refers to Counter
// but if you will do like this
const fn = this.fn;
fn(); // this will refer to global scope
return <div>
<button onClick={this.tick}>1</button>
<button onClick={this.withoutBind}>2</button>
</div>;
}
}
Classes in ES6 are functions. ES6 中的类是函数。 When you instantiate a class, you get an object.
当你实例化一个类时,你会得到一个对象。 For all the methods in your class, if you used
this
inside them, it refers to the object that owns the method.对于类中的所有方法,如果在它们内部使用
this
,则它指的是拥有该方法的对象。
But it is confusing when you extract the method because the context changes.但是当您提取方法时会令人困惑,因为上下文发生了变化。 Examples:
例子:
let foo = Counter()
foo.tick()
If you call foo.tick()
, this
belongs to the object foo.如果你调用
foo.tick()
, this
属于对象 foo。 Cool.凉爽的。
But watch this:但请注意:
tickFunc = foo.tick()
tickFunc()
You detached the function from the original object, now the function invocation happens where this
inside tickFunc()
refers to the global object.您将函数与原始对象分离,现在函数调用发生在
tickFunc()
中的this
引用全局对象的地方。
So why do you need to bind your methods in React?那么为什么需要在 React 中绑定方法呢? You do it because most of the times we are passing the method references either to the event handlers or as props to components.
你这样做是因为大多数时候我们将方法引用传递给事件处理程序或作为组件的道具。 When you pass references of your methods, they become detached functions and their context changes.
当您传递方法的引用时,它们将成为分离的函数并且它们的上下文会发生变化。 To solve that, you use
bind()
in the constructor.要解决这个问题,您可以在构造函数中使用
bind()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.