コードをより美しくするために React コンポーネントを合理的に設計してください。 ！

react の目的は、フロントエンド ページをコンポーネント化し、ステート マシン思考モデルを使用してコンポーネントを制御することです。コンポーネント間には確実に関係があり、合理的なコンポーネント設計と各コンポーネントの適切な境界線の設定により、ページを再構築する際に他のコンポーネントへの影響を効果的に軽減できます。同時に、コードをより美しくすることもできます。

1. 結合力が高く、凝集力が低い。

高結合: 密接に関連する機能部分をコンテナ コンポーネントに配置し、index.js を外部に公開します。ディレクトリ構造は次のとおりです:

├── components
│   └── App
└── index.js

低結合: このコンポーネントが呼び出しページ上で直接削除しても影響は発生しません。不要な繰り返しレンダリングが減り、繰り返しレンダリング時の影響範囲が減ります。

2. 表示コンポーネントとコンテナ コンポーネント

##

ここで注目するのは this.props.children です。 this.props.children を通じて、コンポーネントの凝集度を簡単に低くすることができます。実際の開発では、純粋なコンポーネントで書かれた表示コンポーネントや、データを扱い続けるコンテナコンポーネントに遭遇することがよくあります。ここでは、単に this.props.children を使用してこれらのコンテナ コンポーネントをカバーします。その後、トラップされたコンテナ コンポーネントは、引き続き上記のルールに従って新しいフォルダーを作成し、index.js を公開できます。
この書き方の最大の利点は、作成したコンポーネントがどこにあるのか、何をするのか、何に影響を与えるのかをすぐに見つけられることです。

3. 上から下への一方向のデータ フロー

上記の条件を満たすように設計する必要がある場合、上から下への一方向のデータ フローを使用すると、何かを使用できるようになります。 redux のような状態管理ツールを使用すると、影響範囲をより制御しやすくなり、不要なレンダリングを減らすために shouldComponentUpdate が使用されます。 (ただし、このように書くのは本当に面倒ですが、React は v16.3 から新しいライフサイクル関数 getDerivedStateFromProps を使用して、開発者にこのステップの最適化を強制します)

4. 制御されたコンポーネントと制御されていないコンポーネント

、 など、ユーザーの操作によって変更できる Web コンポーネントが多数あります。これらのコンポーネントは、コンテンツを入力するか、要素の value 属性を設定することによって、コンポーネントの値を変更できます。ただし、React は一方向のデータ フローに束縛されているため、これらのコンポーネントは制御不能になる可能性があります:
1. 値を独自の状態に保持する コンポーネントは外部から変更できません
2プロパティを通じて値を設定する コンポーネントは、外部コントロールを通じてのみ更新できます。

制御されたコンポーネント:

制御された には value 属性が必要です。制御されたコンポーネントをレンダリングすると、value 属性の値が表示されます。
制御されたコンポーネントはそれ自体の内部状態を維持せず、コンポーネントのレンダリングは純粋に props に依存します。つまり、props を通じて値を設定する コンポーネントがある場合、入力方法に関係なく、props.value のみが表示されます。つまり、コンポーネントは読み取り専用です。
制御されたコンポーネントを扱うときは、常に value 属性を渡し、onChange コールバック関数を登録してコンポーネントを変数にする必要があります。

非制御コンポーネント:

value 属性のない は、非制御コンポーネントです。レンダリングされた要素を通じて、ユーザー入力は即座に反映されます。 Uncontrolled は、OnChange 関数を通じてユーザーが入力した変更を上位層にのみ通知できます。

# ハイブリッド コンポーネント:

props.value と state.value の値を同時に維持します。表示では props.value の方が優先され、state.value はコンポーネントの実際の値を表します。

5. 高次コンポーネント (HOC) を使用する

簡単な定義: React コンポーネントをパラメーターとして受け取り、別のコンポーネントを返す関数。
できること: コードの再利用、コードのモジュール化、プロパティの追加、削除、および変更

ユースケース: たとえば、会社が突然フロントエンド コードに別のクリック ポイントを埋めたい場合、次のようにすることができます。 hoc は、元の部分を変更せずに 1 つのレイヤーをラップするためのもので、同時にコードも適切に変更されています。

6. 追加、削除、変更、およびクエリの標準プロセス

追加: データを入力し、データを検証し、データを挿入し、データ リストを再クエリします。
削除: 削除を確認し、データ リストを再度クエリします。
Check: データ リストのクエリ、ページングでの表示

Change: データの入力、データの検証、データの変更、データ リストの再クエリ

実際には、その必要はありません。コンポーネントを設計するときに時期尚早にコンポーネント化すること。最初にバージョンをすばやく作成し、それを実際の設計に従って分割して、プロジェクトの初期段階での要件の急速な変化に対処できます。その後、デザインパターンに従って少しずつプロジェクトを変更していきますが、デザインパターンが適度に分割されていれば、実際には非常にスムーズで自然なことです。

プログラミング関連の知識について詳しくは、プログラミング ビデオ

をご覧ください。 ！ ###

表示コンポーネント	コンテナ コンポーネント
物事のプレゼンテーションに焦点を当てる	物事がどのように機能するかに焦点を当てる
プレゼンテーション コンポーネントとコンテナ コンポーネントが含まれる場合があり、通常は DOM タグと CSS が含まれます。スタイル	プレゼンテーション コンポーネントとコンテナ コンポーネントが含まれる場合がありますが、DOM タグと CSS スタイルは含まれません
多くの場合、this.props.children を介して渡すことができます	データを提供し、動作はコンテナ コンポーネントまたは表示コンポーネントに与えられます。
ストア アクションやフラックス アクションなどのサードパーティへの依存なしで	フラックス アクションを呼び出して提供します。表示コンポーネントへのコールバック
データのロードおよび変更方法を指定しないでください	データ ソースとして、通常、上位コンポーネントを書き込む代わりに使用します。 React Redux の connect()、Relay の createContainer()、Flux Utils の Container.create() など、自分自身の状態
独自の状態を持つことはほとんどありません。たとえあったとしても、それは独自のものです。 UI の状態

以上がコードをより美しくするために React コンポーネントを合理的に設計してください。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。