1. ホーム
  2. reactjs

[解決済み] Reactでes6クラスを使うときの「super()」と「super(props)」の違いとは?

2022-03-15 12:11:34

質問

どのような場合にパスすることが重要ですか? props から super() その理由は?

class MyComponent extends React.Component {
  constructor(props) {
    super(); // or super(props) ?
  }
}

解決方法は?

を渡す必要がある場合、たった一つの理由があります。 props から super() :

にアクセスしたいとき。 this.props をコンストラクタで実行します。

渡すこと。

class MyComponent extends React.Component {    
    constructor(props) {
        super(props)

        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

パスしない

class MyComponent extends React.Component {    
    constructor(props) {
        super()

        console.log(this.props)
        // -> undefined

        // Props parameter is still available
        console.log(props)
        // -> { icon: 'home', … }
    }

    render() {
        // No difference outside constructor
        console.log(this.props)
        // -> { icon: 'home', … }
    }
}

を渡すか渡さないかに注意してください。 props から super がある 効果なし を使用すると、後で this.propsconstructor . それは render , shouldComponentUpdate またはイベントハンドラ 常に にアクセスすることができます。

このことは、ソフィー・アルパートの1冊の本に明示されています。 答え という質問に対して、同じような質問をしました。


ドキュメント- ステートとライフサイクル、クラスへのローカルステートの追加、ポイント2 -を推奨しています。

クラスコンポーネントは、常にベースコンストラクタを呼び出す際に props .

しかし、その理由は示されていない。サブクラス化のためか、将来の互換性のためか、どちらかだと推測されます。

(リンクを貼ってくれた@MattBrowneに感謝)