web-dev-qa-db-ja.com

Reactコンストラクターでsuper（）を呼び出すとどうなりますか？

docs からReactを学習し、この例を見つけました：

class Square extends React.Component {
  constructor() {
    super();
    this.state = {
      value: null,
    };
  }
  ...
}

Mozilla によれば、superではコンストラクターでthisを使用できます。スタンドアロンsuperを使用する他の理由はありますか（superは親クラスのメソッドにもアクセスできることを知っています）が、Reactにはsuper()を単独で呼び出しますか？

javascriptreactjsconstructorecmascript-6
56
stackjlei

super()は、コンストラクターがある場合にのみ、reactコンポーネント内で呼び出されます。たとえば、以下のコードはスーパーを必要としません：

class App extends React.component {
    render(){
        return <div>Hello { this.props.world }</div>;
    }
}

ただし、コンストラクタがある場合、super()は必須です。

class App extends React.component {
    constructor(){
        console.log(this) //Error: 'this' is not allowed before super()

    }
}

thisがsuper()の前に許可されない理由は、super()が呼び出されない場合、thisが初期化されないためです。ただし、thisを使用していない場合でも、ES6 class constructors MUST call super if they are subclassesであるため、コンストラクター内にsuper()が必要です。したがって、コンストラクタがある限り、super()を呼び出す必要があります。 （ただし、サブクラスにはコンストラクターは必要ありません）。

this.propsを使用する必要がある場合、コンストラクター内でsuper(props)を呼び出します。次に例を示します。

class App extends React.component{
    constructor(props){
        super(props);
        console.log(this.props); // prints out whatever is inside props

    }
}

私はそれを明確にしたいと思います。

74
Shubham Khatri

super()は、そのconstructorクラスのparentを呼び出します。これは、親クラスからいくつかの変数にアクセスする必要がある場合に必要です。

Reactで、小道具でsuperを呼び出すとき。 Reactは、this.propsを通じてコン​​ポーネント全体でpropsを使用可能にします。以下の例2を参照してください

super()なし

class A {
  constructor() {
    this.a = 'hello'
  }
}

class B extends A {
  constructor(){
    console.log(this.a) //throws an error
  }
}

console.log(new B())

with super()

class A {
  constructor(props) {
    this.props = props
  }
}

class B extends A {
  constructor(props) {
    super(props)
    console.log(this.props)
  }
}

console.log(new B({title: 'hello world'}))

お役に立てれば！

77
Pranesh Ravi

React.Component subclassのコンストラクターを実装する場合、他のステートメントの前にsuper(props)を呼び出す必要があります。そうしないと、this.propsがコンストラクターでundefinedになり、バグが発生する可能性があります。

1
sg28