代码之家 › 专栏 › 技术社区 › imtk

React用法中的constructor/super/bind是什么?

frontend ecmascript-6 reactjs javascript

imtk · 技术社区 · 6 年前

我查了一下 constructor , super 和 bind 通常是JS。

示例代码。

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 是一个对象,为了在类中创建一个对象,我需要使用 构造器
子类 构造器 将覆盖父级的 构造器 ,我不知道里面是什么 React.Component 但我相信这很重要。我认为在React文档中也有这样的说法:

类组件应该始终使用props调用基构造函数。
超级的 会帮我继承遗产 超级的 是父母的替代品 构造器 . 如果我需要使用 this 在里面 构造器 我要写信 超级的 为了更进一步,我需要通过一个参数do super(props) 使用 this.props
绑定 将创建一个与对象绑定良好的新函数,确保在调用该函数时,它将直接指向正确的对象,因为出于某种原因,如果我不绑定它,我的按钮将如下所示 <button onClick={undefined.doNothing}> ,因为某些类规则:/(可选参数还可以帮助我设置一些有趣的预参数,但这并不是困扰我的问题)

这是我不明白的

我通过的论点的意义,我看过一些例子,但它们并没有真正通过任何论点。(在 props constructor(props) 超级(道具) )
整个绑定代码在我看来很奇怪, this.doNothing 变成什么了? this.this.doNothing ? 它是如何工作的,为什么我的按钮知道在哪里找到它?

我知道这是一个基本的,但我尽了我最好的期待,我会感谢如果有人能帮助我。

3 回复 | 直到 6 年前

blaz 6 年前

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

可以在类中创建任何对象。就这样 state 在React中是一个特殊的:它需要在构造函数中定义,以便在React组件生命周期中使用。

子类的构造函数将重写父类的构造函数,我不知道React.Component是什么,但我相信它很重要。

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

你后面的部分就说到点子上了。
bind将创建一个与对象绑定良好的新函数, 确保调用函数时,它将直接指向正确的对象,因为如果我不绑定它,我的按钮将类似于'button onClick={undefined.doNothing}>,因为阶级规则

this in-React组件是指组件本身。React.Component提供的功能,例如。 render 总是有 这 绑定到组件,而您自己定义的函数没有 <button onClick={this.doNothing}> 在里面 render() 不会引起任何问题,但是 doNothing() 需要在构造函数中绑定才能访问 这 .

我通过的论点的意义,我看过一些例子,但是没有真正通过任何辩论。(道具构造器(道具) 超级(道具)

向上看第一点。如果你使用 super() 而不是 超级(道具) , 这个道具 将在构造函数中未定义。它仍然可以在其他功能中访问。 Here is the original answer to this.

在我看来,整个绑定代码都很奇怪什么?这个。这个。不要?它是怎么工作的,为什么我的按钮知道去哪里找吗?

看第四点。 this.doNothing().bind(this) 允许您访问 这 内部功能 不接电话() ,包括读取组件的状态、道具和调用组件的其他函数。没有约束力, 这 将在内部未定义 不接电话() .

Shubham Khatri 6 年前

当您使用 this 关键字,它属于React类的作用域,因此可以在整个React类的作用域中使用。

我通过的论点的意义,我看过一些例子,但是没有真正通过任何辩论。

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

例如当你写

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>
  }

Jonas Wilms 6 年前

你已经准备好了 props 你自己却不知道:

 <button onClick={this.doNothing}>

在这里 onClick 将设置为 this.doNothing 在 道具 传递给 button 构造器。把道具传给你的 Example 一班可以做到:

 <Example color="blue" />

现在在 render 方法例如,您可以通过以下方式访问它:

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

通过这一点,您的组件可以在不同的地方重用,因为父组件可以更改它们的道具来定义它们的行为。