Question

this在以下代码中引用了什么：

class Foo extends React.Component {
  constructor() {
    super();
    this.state = {
      bar: "baz",
    }
  }
}

我读过YDKJS，它说this没有引用函数本身，但在上面的代码中不是this.state设置Foo的状态？

Answer 1

使用类构建蓝图以最终创建特定实例。 constructor包含在创建新实例时正在运行的代码。所以类this总是（static methods除外）指的是创建的特定实例。

例如：

class Rectangle {
  constructor(height, width, name) {
    this.height = height;
    this.width = width;
    this.name = name
  }

  calcArea() {
    console.log(this.name)
    return this.height * this.width;
  }
}

const square1 = new Rectangle(10, 10, 'square1');
const square2 = new Rectangle(15, 15, 'square2');

console.log(square1.calcArea()) // square1 100
console.log(square2.calcArea()) // square2 225

正如您所看到的，this不仅指代通用Rectangle，还指向您正在使用的特定实例。 React Components也是如此。

所以回答你的问题

this.state = {
    bar: "baz",
}

未设置Foo的状态。但它设置了使用蓝图（类）Foo创建的特定实例的状态。因为在React的代码中，它会调用new Foo。只有它会设置实例的状态。

Answer 2

＆＃34;这＆＃34;是关键字，它保存对某事物的引用，在这种情况下，这是在一个命名为Foo的类中使用，所以当我们使用关键字＆＃34; this＆＃34;在类中，它指的是类本身。

通过表示它引用Foo，意味着现在您可以借助此关键字访问属于类的其他属性和函数。类就像一个蓝图，它本身不存在，我们创建类的对象/实例来访问它们。一旦创建了对象/实例，并且我们想要在它们之间访问类的属性，我们使用此关键字。

在反应对象创建中，通过以下语法

完成

<Foo />

当调用组件时。现在在构造函数中使用代码

this.state = {
      bar: "baz",
    }

我们确保我们也可以从任何其他功能访问此组件中的条形键。类似下面的内容

render(){
    console.log(this.state.bar);
    return (<div>{this.state.bar}</div>)
}

希望这有帮助。

Answer 3

我没有足够的代表投票或评论，所以我会在这里添加我的评论。

@vellip的答案大多是正确的，但是，句子“所以这里面的一个总是（静态方法除外）是指创建的特定实例。”并不完全准确，因为在javascript中“this”依赖于执行上下文，而不仅仅是词法范围，即“在一个类中”。因此，如果一个类进行事件处理，那么“this”也可能是对创建事件的元素的引用。

Answer 4

在您提供的示例代码中，Foo只是某些视图的描述（或蓝图），它不是蓝图的实际视图或实例。当必须将它呈现为实际视图时，React会创建Foo的实例，只要它在jsx中遇到<Foo />，它就会这样做。 React内部使用React.createElement方法来创建其组件的实例，因此要创建Foo的实例，它将在内部执行类似的操作：

const fooInstance = React.createElement(Foo)

fooInstance是一个普通的javascript对象，如果你记录它，this在Foo内引用它。我希望您现在明白this Foo内部Foo并不引用Foo，而是指React.createElement() {{1}}使用{{1}}创建的实例。在你的jsx中遇到`。

“这个”在React组件中引用了什么？

4 个答案: