React でコンポーネントを定義する 3 つの方法の違いは何ですか?

違い: 1. 機能的に定義されたステートレス コンポーネントはライフ サイクル メソッドにアクセスできませんが、es5 および es6 メソッドはステートフル コンポーネントを定義し、ライフ サイクル メソッドにアクセスできます; 2. es5 メソッドのこの関数は自動的にバインドできます。ただし、es6 メソッドの関数 this は自動的にバインドできないため、手動でバインドする必要があります。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react で React コンポーネントを定義する 3 つの方法の違いは何ですか

React のリリース後、さまざまな理由で React コンポーネントを定義する 3 つの方法が存在します。そのすべてが次のことにつながります。同じ目標です。具体的な 3 つの方法は次のとおりです:

• 機能的に定義されたステートレス コンポーネント

• es5 ネイティブな方法 React.createClass で定義されたコンポーネント

• es6 フォームで定義されているコンポーネントは React.Component を拡張したものです

#1. ステートレスな機能コンポーネント

# 用です純粋な表示コンポーネントの作成。この種類のコンポーネントは、受信したプロパティに基づいて表示することのみを担当し、状態操作は関与しません。

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

2. ES5 ネイティブ メソッド React.createClass // RFC

React.createClass は関数を自己バインドしますメソッドを使用すると、不必要なパフォーマンスのオーバーヘッドが発生し、コードが陳腐化する可能性が高まります。

3. E6 継承フォーム React.Component // RCC

は現在、ステートフル コンポーネントを作成するための強く推奨される方法であり、最終的には React.createClass フォームを置き換えます。 React.createClass に変更すると、コードの再利用をより適切に実現できます。

ステートレス コンポーネントと後者の 2 つの違い

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

#React.createClass**** と React.Component の違い

関数この自己バインディング

React.createClass で作成されたコンポーネントの場合、各メンバー関数の this は React によって自動的にバインドされ、関数内の this が正しく設定されます。

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

コンポーネントのプロパティ タイプ propTypes とそのデフォルトの props プロパティ defaultProps は構成が異なります。

React.createClass がコンポーネントを作成するとき、コンポーネントのプロパティ タイプは props です。プロパティはコンポーネント インスタンスのプロパティとして設定されます。defaultProps は getDefaultProps メソッドを使用してデフォルトのコンポーネント プロパティを取得します。

React.Component コンポーネントの作成時にこれら 2 つの対応する情報を設定する場合、これらはコンポーネント クラスとして使用されます。プロパティはコンポーネント インスタンスのプロパティではなく、いわゆるクラスの静的プロパティです。

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

React.createClass によって作成されたコンポーネントの状態は、getInitialState メソッドを通じて構成されます。コンポーネント関連の状態;

React.Component によって作成されたコンポーネントの状態は、コンポーネントのプロパティの初期化と同様にコンストラクターで宣言されます。

最終要約

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

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

推奨される学習: 「

react ビデオ チュートリアル

」

以上がReact でコンポーネントを定義する 3 つの方法の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。