Javascript 嵌套的；这"；使用ReactJS在ES6类中绑定

通过阅读React文档，我发现：

类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
this.timerID=setInterval(
（）=>这个。勾选（），
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

我的问题是：

在

componentDidMount（）

中，箭头函数

（）=>this.tick（）

捕获“封装的

此
值，因此对
组件调用适当的
tick
方法

但是
勾选
单独使用
此
随后调用
设置状态
方法。在没有任何绑定的情况下，这是如何工作的？换句话说，
this.setState
如何工作

感谢
根据，
函数.prototype.bind将创建一个新函数，其主体和作用域与原始函数相同，但其中新函数作用域中的
此
引用传递到
bind
的参数。这意味着您可以将一个变量，比如说
newContext
传递到
bind
函数中，比如：
tick.bind（newContext）
，tick中的
此
的每个实例都将被评估为
newContext
。虽然
this
是一个引用范围上下文的关键字，但我们已更改了范围的上下文，因此
this
具有不同的值

箭头符号的作用类似，它将用箭头函数作用域上下文的值替换值
勾选中的
this
。这就是为什么
tick
中的
This
关键字没有
undefined
值的原因。
我想Rajesh已经在评论中解释过了，不过我会尝试解释一下

箭头函数不会创建自己的此上下文，因此它的原始含义来自封闭上下文，即从调用它的位置，在您的例子中是
componentDidMount

  componentDidMount() {
    // this refers to React.Component instance
    this.timerID = setInterval(
      () => this.tick(),  // <----------------Same this is available here
      1000
    );
  }

到目前为止，我们还不能确切地说出
这个
在
勾选中的值是多少。
我们也不能说“
setState
”在
上是否可用

除非并直到我们看到从哪里调用
勾号
，以及在运行时将
勾号
附加到
执行上下文的内容

现在，如果我们看到tick从何处被调用-
componentDidMount
。
componentDidMount
是react组件的生命周期方法，它（关联上下文即此上下文）肯定有可用的
setState
方法

在
componentDidMount
中，我们通过箭头函数
（）=>{}
或通过
绑定
将
this
设置为
react component
上下文。
这就是调用时，
setState
在
tick
中可用的原因，您不会看到任何错误

但是，如果您不使用箭头函数或显式绑定，则每次
setInterval
调用
勾号
函数时，通过将全局勾号与勾号关联，您都会收到以下错误

  "message": "Uncaught TypeError: this.setState is not a function",

请通过运行查看以下代码段以查看错误


类时钟扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={date:new date（）}；
}
componentDidMount（）{
//现在，这个内部标记将指向setInterval执行上下文，它可能是全局的
this.timerID=setInterval(
这个，滴答，
1000
);
}
组件将卸载（）{
clearInterval（this.timerID）；
}
勾选（）{
这是我的国家({
日期：新日期（）
});
}
render（）{
返回(
你好，世界！
它是{this.state.date.toLocaleTimeString（）}。
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

（）=>
实际上将当前函数绑定到此函数。它类似于
function（）{}.bind（this）
。您也可以尝试设置超时（this.tick.bind（this），1000）
@Rajesh您的建议仅适用于
this.tick
。在
勾选
方法中，此
再次用于调用
设置状态
。这就是最让我困扰的
这个
。你认为
这个
在
勾选
中会保留什么？@Rajesh我认为
勾选
函数中的
这个
应该是未定义的，或者全局对象/窗口。但不是react组件…有关此
的说明，请参阅：。一个简单的解释是，函数的this指向被调用方（与其关联的实例）或默认值（窗口或未定义）。现在，当您执行
（）=>
时，您将
组件的
这个
绑定到
勾选
，它指向“组件”。因此，设置状态工作正常
  tick() {
    this.setState({
      date: new Date()
    });
  }

  "message": "Uncaught TypeError: this.setState is not a function",