super（）做什么没有任何参数？ [英] what does super() do without any arguments?

问题描述

我正在学习文档的反应，但不确定 super（）在此示例中的作用。通常，是否需要传递给生成新实例的参数，然后调用React.Component的构造函数方法将这些参数合并到实例中？没有任何参数它会做什么？

I'm learning react from the docs, but not sure what the super() does in this example. Usually, doesn't it take the arguments that are passed to making a new instance and then calls React.Component's constructor method to incorporate these arguments into the instance? What does it do without any arguments?

class LikeButton extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}

ReactDOM.render(
  <LikeButton />,
  document.getElementById('example')
);

推荐答案

在ES6中，派生类必须调用 super（）如果他们有构造函数。在react中，所有组件都从Component类扩展。

In ES6, derived classes have to call super() if they have a constructor. In react, all components extend from the Component class.

实际上，每个ES6 / react类都不需要构造函数。如果没有定义自定义构造函数，它将使用默认构造函数。对于基类，它是：

You don't actually need a constructor for every ES6/react class. If no custom constructor is defined, it will use the default constructor. For base classes, it is:

constructor() {}

对于派生类，默认构造函数是：

And for derived classes, the default constructor is:

constructor(...args) {
  super(...args);
}

您还需要拨打 super（）此之前code>，因为此在 super（）之前未初始化被调用。

You also need to call super() before accessing this, since this is not initialized until super() is called.

在react中使用自定义构造函数有几个原因。一个是你可以使用 this.state = ... 在构造函数中设置初始状态，而不是使用 getInitialState 生命周期方法。

There are a few reasons to use a custom constructor in react. One is that you can set the initial state within the constructor using this.state = ... instead of using the getInitialState lifecycle method.

您还可以使用 this.someClassMethod = this.someClassMethod.bind（this）将构造函数内的类方法绑定。实际上，在构造函数中绑定方法更好，因为它们只会被创建一次。否则，如果您调用 bind 或使用箭头函数将方法绑定到构造函数之外的任何位置（例如 render 方法），它实际上最终会在每个渲染上创建一个新的函数实例。详细了解此处。

You can also bind class methods inside the constructor with this.someClassMethod = this.someClassMethod.bind(this). It's actually better to bind methods in the constructor since they will only be created once. Otherwise if you call bind or use arrow functions to bind methods anywhere outside the constructor (like in the render method), it will actually end up creating a new instance of the function on every render. Read more about that here.

如果你想在构造函数中使用 this.props ，你需要调用 super 以道具作为参数：

If you want to use this.props in the constructor, you need to call super with props as an argument:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
}

如果不这样做，那么 this.props 在构造函数中未定义。但是，您仍然可以在构造函数之外的类中的任何其他位置访问 this.props ，而无需在构造函数中对其执行任何操作。

If you don't, then this.props is undefined in the constructor. However, you can still access this.props anywhere else in the class outside the constructor without needing to do anything with it in the constructor.

这篇关于super（）做什么没有任何参数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！