Reactがコンポーネントを作成する3つの方法は何ですか？違いは何ですか？

これは、純粋な表示コンポーネントを作成することです。このコンポーネントは、着信する小道具に基づいて表示することのみを担当し、状態stateの操作を含みません

コンポーネントはインスタンス化されず、全体的なレンダリングパフォーマンスが向上し、このオブジェクトにアクセスできず、ライフサイクルメソッドにアクセスできません

React.createClassは関数メソッドを自己バインドし、不要なパフォーマンスオーバーヘッドを引き起こし、コードが陳腐化する可能性を高めます。

ステートフルコンポーネントを作成するために現在強く推奨されている方法は、最終的にReact.createClassフォームに置き換わります。コードの再利用は、React.createClassよりも優れています。

ステートレスコンポーネントと比較して、React.createClassとReact.Componentの両方がステートフルコンポーネントを作成します。これらはインスタンス化され、コンポーネントのライフサイクルメソッドにアクセスできます。

①この自己結合機能

React.createClassによって作成されたコンポーネントの場合、各メンバー関数のこれはReactによって自動的にバインドされ、関数内でこれが正しく設定されます。
React.Componentによって作成されたコンポーネントの場合、そのメンバー関数はこれに自動的にバインドされず、開発者は手動でバインドする必要があります。そうしないと、現在のコンポーネントインスタンスオブジェクトを取得できません。

②コンポーネントプロパティタイプpropTypesとそのデフォルトのpropsプロパティdefaultPropsは異なる構成になっています

React.createClassがコンポーネントを作成すると、コンポーネントプロパティのプロパティタイプとコンポーネントのデフォルトプロパティがコンポーネントインスタンスのプロパティとして設定されます。defaultPropsはgetDefaultPropsのメソッドを使用してデフォルトコンポーネントプロパティを取得します
コンポーネントの作成時にReact.Componentがこれらの2つの対応する情報を構成する場合、それらはコンポーネントインスタンスのプロパティではなく、コンポーネントクラスのプロパティとして構成されます。これは、クラスの静的プロパティとも呼ばれます。

③コンポーネントの初期状態の構成が異なります

React.createClassによって作成されたコンポーネントの状態は、getInitialStateメソッドを介してコンポーネントの関連する状態を構成することです。
React.Componentによって作成されたコンポーネントの状態は、コンポーネントプロパティの初期化と同様にコンストラクターで宣言されます。

最終まとめ

可能な限り、ステートレスコンポーネントの作成を使用してください。

React.Componentで作成できるコンポーネントは、再利用性を高めてパフォーマンスを向上させるために、React.createClassの形式でコンポーネントを作成しないようにします。

203件の元の記事を公開・賞賛8 ・ 10,000回以上の閲覧