Question

我在通用JS中查找了constructor，super和bind的功能。

示例代码。

import React from 'react';

class Example extends React.Component {
  constructor(props){
    super(props);
    this.state = { mood: confused }   
    this.doNothing = this.doNothing.bind(this);
  }

  doNothing(){} //I really do nothing

  render(){
    <button onClick={this.doNothing}>I do nothing xD</button>
  }
}

这是我现在所了解的

State是一个对象，为了在一个类中创建一个对象，我需要使用constructor
子类的constructor将覆盖父类的constructor，我不知道React.Component中的内容，但是我相信它很重要。我认为React Document中也有这样的说法：

类组件应始终使用prop调用基本构造函数。
super将帮助我进行继承，而super代替了父母的constructor。如果我需要在this中使用constructor，我需要写super并走得更远，我需要通过一个段落super(props)来使用this.props < / li>
bind将创建一个与对象绑定良好的新函数，确保在调用该函数时，它将直接指向正确的对象，因为出于某种原因，如果我不绑定它，我的按钮会像<button onClick={undefined.doNothing}>一样，因为有一些类规则：//（可选的参数也可以帮助我设置有趣的前置参数，但这并不困扰我）

这是我不明白的

我传递的参数的含义，我已经看到了一些示例，但实际上并没有传递任何参数。（props constructor(props) super(props)）
整个绑定代码对我来说都很奇怪，this.doNothing变成了什么？ this.this.doNothing？它实际上是如何工作的，为什么我的按钮知道在哪里找到它？

我知道这有点基本，但是我确实尽力寻找最好的东西，如果有人可以帮助我，我将不胜感激。

Answer 1

使用this关键字定义变量时，该变量属于React类的范围，因此可以在React类的整个范围内使用。

我传递的参数的含义，我已经看到了一些例子，但是它们并没有真正传递任何论点。

就绑定而言，.bind将上下文作为参数并返回一个函数，该函数在执行时将引用React类的上下文。传递给绑定的其余参数在调用时可供该函数使用。

例如，当您写作

constructor(props){
    super(props);  
    this.doNothing = this.doNothing.bind(this);
  }

bind返回的函数被分配给在类范围内定义的变量doNothing。如果您将其更改为

constructor(props){
    super(props);  
    this.someNewFunction = this.doNothing.bind(this);
}

您将使用它

render(){
    <button onClick={this.someNewFunction}>I do nothing xD</button>
  }

Answer 2

状态是一个对象，为了在我需要的类中创建一个对象使用构造函数

您可以在类内创建任何对象。只是state在React中是一个特殊的变量：它需要在构造函数中定义才能在React组件的生命周期中使用。

子类的构造函数将覆盖父类的构造函数，我不知道React.Component中有什么，但我相信它很重要。

据我所知，构造函数有三个工作：（1）允许this.props访问super(props)，（2）初始化状态，（3）绑定函数。

您的稍后部分就很关键。
bind将创建一个与对象很好地绑定的新函数，确保在调用该函数时，它将直接指向正确的对象，因为某种原因，如果我不绑定它，我的按钮就像“ button onClick = {undefined.doNothing}>”，因为班级规则

React组件中的

this是指组件本身。 React.Component提供的功能，例如render始终将this绑定到组件，而您自己定义的函数则没有。因此，<button onClick={this.doNothing}>中的render()不会造成任何问题，但是doNothing()必须绑定到构造函数中才能访问this。

我传递的参数的含义，我已经看到了一些例子，但是它们并没有真正通过任何论点。（道具构造器（props）超级（道具））

请注意第1点。如果使用super()而不是super(props)，则this.props在构造函数中将是未定义的。在其他功能中仍然可以访问它。 Here is the original answer to this.

整个绑定代码对我来说都很奇怪，this.doNothing变成了什么？ this.this.do什么都没有？真正如何运作，为什么我的按钮知道在哪里找到它吗？

查看第4点。this.doNothing().bind(this)允许您访问函数this内部的doNothing()，包括读取状态，道具和调用组件的其他函数。如果没有绑定，this将在doNothing()内部未定义。

Answer 3

您已经不知道自己设置了props：

 <button onClick={this.doNothing}>

此处onClick将在传递给this.doNothing构造函数的props内设置为button。要将道具传递给您的Example班级，可以做到：

 <Example color="blue" />

例如，现在在render方法中，您可以通过以下方式访问它：

 <button style = {{ color: this.props.color }} > Some button </button>

您的组件可以在不同的地方重复使用，因为父级可以更改其道具以定义其行为。

React用法中的构造函数/ super / bind是什么？

3 个答案: