React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント

上記のように、Child クラスは class キーワードを使用して宣言され、React クラスから継承されます。

A. 子供のタイプは何ですか? typeofChild === 'function' は、実際には ES5 で宣言されたコンストラクターと同等です。 function Child() { // コンストラクターを宣言します}

B. Child クラスが呼び出されると (new Child())、それが最初に実行され、Child のコンストラクター関数が自動的に実行されます。

コンストラクタ() {
   console.log('コンストラクタが実行されました')
       「はっ」と返す
   }

   取得名() {
       console.log('メソッドが実行されました')
   }
}
var dd = new Person();
コンソール.log(dd)

次のように印刷されます。

3. これは Child クラスにありますか? this は Child のインスタンスを指しており、これは new Child() と同等です。それで、それらは完全に等しいのでしょうか? いいえ、React 内の this は new Child() に基づいてラップされます (下の図を参照)。

上の図は新しいChild()を示しています。次の図はChildでのこれを示しています。

結論: これは、いくつかの React 内部メソッドを含む、new Child() に基づいてラップされています。

同時に、コンポーネント内で Child クラス ( <div> <Child /> </div> ) が使用されており、これは new Child() + react パッケージとして確認できます。（詳細は調査中…）

2. コンポーネント内のコンストラクターは必要ですか? そうでなかったらどうしますか? ?効果は何ですか？ ? ?

ES6 の補足知識: http://es6.ruanyifeng.com/ は次のとおりです。

クラスColorPointはPointを拡張します{
}

// クラス ColorPoint は Point を拡張します {
  コンストラクタ(...引数) {
    super(...引数);
  }
}
// ご覧のとおり、コンストラクタは記述されていません。実行時に自動的に入力されます。

ES6 の継承ルールによれば、サブクラスがコンストラクターを記述するかどうかに関係なく、新しいインスタンスを作成するプロセスでコンストラクターが追加されます。

したがって、コンストラクターフック関数は必須ではなく、場合によってはサブコンポーネントを省略できます。

次に、コンストラクターフック関数の有無の違いを見てみましょう。

A. まずコンストラクタフック関数 this.constructor があるかどうかを確認します。

コンストラクターフック関数を持つ this.constructor

コンストラクタフック関数のない this.constructor

詳細を見てみると、コンストラクターフック関数がある場合、Child クラスに追加のコンストラクターメソッドがあることがわかります。

B. まず、コンストラクターフック関数、つまりコンポーネントインスタンスに this があるかどうかを確認します。

このインスタンスにはコンストラクターフック関数があります。

このインスタンスにはコンストラクタフック関数がありません。

コンストラクタフック関数がある場合、状態を定義できることがわかります。ユーザーが状態を定義しない場合は、コンストラクタフック関数の有無に違いはありません。

結論: コンポーネントが独自の初期状態を定義する場合は、コンストラクターフック関数に記述する必要があります。

ユーザーが状態を使用しない場合、コンストラクターフック関数の有無にかかわらず、props を使用してパラメーターを受け入れます。コンストラクターフック関数は省略することもできます。

さらに、状態を使用しない場合は、ステートレスコンポーネント (推奨) を使用するのはなぜでしょうか? ? ?

3. スーパーに小道具は必要ですか? 機能は何ですか? ?

友人の中には、コンポーネントを書くたびにコンストラクターとスーパーに props を書くことに慣れている人がいます。これは必要なのでしょうか? ?

図に示すように:

まず、次の点を明確にすることが重要です。

コンストラクタを書く必要はありません。コンストラクタを書いたら、この関数に super() を書かなければなりません。

この時点で、コンポーネントには独自の this があり、 this キーワードをコンポーネント内でグローバルに使用できます。

それ以外の場合、それが単なるコンストラクターであり、super() が実行されない場合、後続の this はすべて間違ってしまいます。！！

ソース ES6: http://es6.ruanyifeng.com/

しかし、パラメータ props を super に記述する必要があるのでしょうか? ? 答えは必ずしもそうではありません。まずはコードを見てみましょう。

小道具付き:

小道具なし:

コンストラクターで this.props を使用する場合は、super (props) を追加する必要があることがわかります。

このとき、props または this.props を使用できます。これらは同じものです。 (ただし、props は任意のパラメータにすることができますが、this.props は固定の書き込み方法です)。

図に示すように:

this.props または props が custructor ライフサイクルで使用されていない場合は、 props を省略できます。

以下は、props を使用したシナリオです。このとき、componentWillReceiveProps ライフサイクルを忘れないでください。

別の記事「Reactのライフサイクルについて知っておくべきこと」を参照してください

続き：コンストラクタがsuperを通してpropsを受け取らない場合は、他のライフサイクルでは、

this.props は、componentWillMount、componentDidMount、render で直接使用できますか? ?

結論: はい、React はコンストラクターを除くライフサイクルで this.props を渡しており、super(props) の影響はまったく受けません。

したがって、super 内の props が受け取られるかどうかは、コンストラクターのライフサイクルで this.props が使用できるかどうかにのみ影響します。他のライフサイクルでは、this.props はデフォルトで既に存在しています。

これで、React コンポーネントのコンストラクターとスーパーの知識ポイントに関するこの記事は終了です。React コンポーネントのコンストラクターとスーパーに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: