コードをより美しくするために React コンポーネントを合理的に設計してください。！-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-02-13 09:10:22

転載

3233 人が閲覧しました

コードをより美しくするために 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. 制御されたコンポーネントと制御されていないコンポーネント

、コンポーネントは外部から変更できません
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 の状態