super（）做什么与任何参数？ [英] what does super() do with 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（）如果他们有一个构造函数。在反应中，所有组件都从Component类扩展。

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

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

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.

有一些原因使用自定义构造函数进行反应。一个是您可以使用 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屋！