[英]How does React call the render function of an ES6 class in a such a way that `this` does not refer to the class itself?
For example, given the class with a function increaseQty 例如,给定具有函数increaseQty的类
increaseQty() {
this.qty++
}
and the call 和电话
render() {
return (
<div>
<button onClick={this.increaseQty}>Increase</button>
</div>
)
}
this.qty will be undefined unless I write a line in my constructor binding the context of this
in the constructor to the function this.qty是不确定的,除非我写我的构造线结合的情况下
this
在构造函数中的作用
constructor(props) {
super(props)
this.qty = 0
this.increaseQty = this.increaseQty.bind(this) // <---- like so
}
However this isn't the case in a normal es6 class if you're just using it normally: 但是,如果您只是正常使用它,那么在正常的es6类中就不是这种情况:
https://jsfiddle.net/omrf0t20/2/ https://jsfiddle.net/omrf0t20/2/
class Test {
constructor() {
this.qty = 0
}
increaseQty() {
console.log(++this.qty)
}
doStuff() {
this.increaseQty()
}
}
const t = new Test()
t.doStuff() // prints 1
What aspect of React makes it so that render
is called without the context of this
? 哪些方面发生反应使得它使
render
调用时没有的情况下this
?
The difference here is that in your example with React you are passing increaseQty
as a callback to another component, but in the second, you are calling it within the current context. 这里的区别是,在你的榜样与之反应你逝去的
increaseQty
作为回调到另一个组件,但在第二,你是在当前上下文中调用它。
You can see the difference here in simplified example 您可以在简化示例中看到差异
class Test {
constructor() {
this.qty = 0
}
increaseQty() {
console.log(++this.qty)
}
doStuff() {
this.increaseQty(); // no need to bind
}
listenClicks() {
// you should use bind to preserve context
document.body.addEventListener('click', this.increaseQty.bind(this));
}
}
React guidelines also recommend you bind methods in the constructor, to make the code more optimal, bind it once and always use the same function rather than create a new bound version for each render()
call. React指南还建议您在构造函数中绑定方法,使代码更加优化,绑定一次并始终使用相同的函数,而不是为每个
render()
调用创建新的绑定版本。
This isn't really an ES6 specific question (other than the fact that we are referencing a class and constructor). 这不是一个特定于ES6的问题(除了我们引用类和构造函数之外)。 What you're doing in your function is just incrementing a value.
你在函数中所做的只是递增一个值。 If that value has not been initialized to something (even in ES5) then it will throw an error.
如果该值尚未初始化为某些内容(即使在ES5中),则会引发错误。 You can't add 1 to
undefined
. 您不能将1添加到
undefined
。
In ES5 (and ES6 really) this would be a problem: 在ES5(和ES6真的)这将是一个问题:
var myObj = {
addOne: function() {
this.qty++;
}
}
myObj.addOne(); // Error! this.qty is undefined
Whereas this would resolve it: 虽然这会解决它:
var myObj = {
qty: 0,
addOne: function() {
this.qty++;
}
}
myObj.addOne(); // Good to go
It's the same situation in your class. 你班上的情况也是如此。 You cannot increment a variable that you haven't declared and initialized to a number value.
您不能将尚未声明和初始化的变量增加到数值。
In an even simpler example this: 在一个更简单的例子中:
var x;
x++;
would throw an error whereas this: 会抛出一个错误,而这个:
var x = 0;
x++;
is good. 很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.