web-dev-qa-db-ja.com

super（）は引数なしで何をしますか？

docs から反応することを学んでいますが、この例でsuper()が何をするかはわかりません。通常、新しいインスタンスを作成するために渡される引数を取り、React.Componentのコンストラクターメソッドを呼び出してこれらの引数をインスタンスに組み込みますか？引数なしで何をしますか？

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')
);
javascriptreactjsecmascript-6super
29
mangocaptain

ES6では、コンストラクターがある場合、派生クラスはsuper()を呼び出す必要があります。反応では、すべてのコンポーネントはComponentクラスから拡張されます。

実際、すべてのES6/reactクラスにコンストラクターは必要ありません。カスタムコンストラクターが定義されていない場合、 デフォルトコンストラクター が使用されます。基本クラスの場合：

_constructor() {}
_

派生クラスの場合、デフォルトのコンストラクターは次のとおりです。

_constructor(...args) {
  super(...args);
}
_

thisはsuper()が呼び出されるまで初期化されないため、thisにアクセスする前にsuper()を呼び出す必要もあります。

反応でカスタムコンストラクターを使用する理由はいくつかあります。 1つは、getInitialStateライフサイクルメソッドを使用する代わりに、_this.state = ..._を使用してコンストラクター内で初期状態を設定できることです。

コンストラクター内でthis.someClassMethod = this.someClassMethod.bind(this)を使用してクラスメソッドをバインドすることもできます。メソッドは一度しか作成されないため、実際にはコンストラクターでメソッドをバインドする方が適切です。そうでない場合、bindを呼び出すか、コンストラクターの外部（renderメソッドなど）でメソッドをバインドするために矢印関数を使用すると、実際にはすべてのレンダリングで関数の新しいインスタンスが作成されます。詳細については こちら をご覧ください。

コンストラクターで_this.props_を使用する場合は、propsを引数としてsuperを呼び出す必要があります。

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

そうしないと、コンストラクターで_this.props_は未定義になります。ただし、コンストラクターで何もすることなく、コンストラクターの外部のクラスのどこでも_this.props_にアクセスできます。

45
Varun Munjeti

親クラスのメソッドを呼び出すために、javascriptのsuper()キーワードが使用されます。これは、多くの場合、コンストラクター関数内で親コンストラクター関数を呼び出すために使用されます。例えば：

class Animal {
  
  constructor(age) {
    console.log('Animal being made');
    this.age = age;
  }
  
  returnAge() {
    return this.age;
  }
  
}

class Dog extends Animal {

  constructor (age){
    super(age);
  }
  
  logAgeDog () {
    console.log(`This dog is: ${ super.returnAge()} years old`);
  }
  
}

const dog = new Dog(5);


console.log(dog);

dog.logAgeDog();

この例では、extends AnimalクラスのDogクラスがあります。 Dogクラスは、superキーワードを2回使用します。最初の出現はコンストラクターであり、コンストラクターでsuper()が使用されると、親クラスコンストラクターが呼び出されます。したがって、ageプロパティを引数として指定する必要があります。これで、犬には正常に年齢プロパティが設定されました。

また、コンストラクターの外部でsuper()を使用して、親の「クラス」（つまりプロトタイプ）のプロパティとメソッドにアクセスすることもできます。これをDogクラスにあるlogAgeDog関数で使用します。次のコードを使用します。

super.returnAge();

これを次のように読む必要があります。

Animal.returnAge();     // superClass.returnAge()

Reactでこれが必要なのはなぜですか？

React only]のsuper()キーワードが必要です。コンストラクタを実装する場合、次の手順を実行する必要があります。

constructor(props) {
  super(props);
  // Don't call this.setState() here!
}

Componentという名前の親クラスは、Reactが正常に機能するために、独自の初期化を行う必要があります。super(props)なしでコンストラクタを実装する場合Componentのthis.propsを呼び出すと、undefinedになり、バグが発生する可能性があります。

10
Willem van der Veen