Question

我是React JS的新手，并且一直在阅读React文档。在一个示例中，属性（this.timerID）在生命周期方法中定义（而不是在构造函数中），然后继续在另一种方法中使用。我无法理解该属性中的“ this”如何帮助扩大其范围。

确切的文档在https://reactjs.org/docs/state-and-lifecycle.html上。我一直在https://www.codementor.io/dariogarciamoya/understanding--this--in-javascript-du1084lyn?icn=post-8i1jca6jp&ici=post-du1084lyn上对'this'进行进一步的研究。我不知道是我对ES6类方法的理解还是引起问题的“ this”。

class Clock extends Component {
  constructor(){
  ...
  }
  componentDidMount(){
    this.timerID = setInterval(() => this.tick(), 1000)
  }

  componentWillUnmount(){
    clearInterval(this.timerID);
  }
}

很抱歉，这个问题有点含糊，不胜感激。

Answer 1

这是指组件的当前实例。因此，在您的示例中，您正在为实例设置时间间隔。

Answer 2

在将this关键字与变量或对象一起使用时，将在其当前范围内引用该关键字。这里的ComponentDidMount是类生命周期方法，当在this内用any method of a class关键字分配变量时，则意味着它正在访问Class的变量，而不是其自身的变量。

在您的示例中，this.timerID在整个类的范围内使用ComponentDidMount变量来更改状态变量，然后呈现组件。如果您在ComponentDidMount中使用var timerID，则它会以相同的方式工作，但如果您想在其他函数中使用timerID，则this.timerID将显示为未定义，因为仅在安装及其作用域时可用仅在该方法内部。

问题在于，您使用的所有内容都必须具有定义的范围。

在这里，此关键字只是详细说明了在类内部使用的变量的范围。就是这样，只有适当的方法可以管理变量/对象来完成工作。

生命周期方法中的“ this”如何工作？

2 个答案: