物事のプレゼンテーションに焦点を当てる |
物事がどのように機能するかに焦点を当てる |
プレゼンテーション コンポーネントとコンテナ コンポーネントが含まれる場合があり、通常は DOM タグと CSS が含まれます。スタイル |
プレゼンテーション コンポーネントとコンテナ コンポーネントが含まれる場合がありますが、DOM タグと CSS スタイルは含まれません |
多くの場合、this.props.children を介して渡すことができます |
データを提供し、動作はコンテナ コンポーネントまたは表示コンポーネントに与えられます。 |
ストア アクションやフラックス アクションなどのサードパーティへの依存なしで |
フラックス アクションを呼び出して提供します。表示コンポーネントへのコールバック |
データのロードおよび変更方法を指定しないでください |
データ ソースとして、通常、上位コンポーネントを書き込む代わりに使用します。 React Redux の connect()、Relay の createContainer()、Flux Utils の Container.create() など、自分自身の状態 |
独自の状態を持つことはほとんどありません。たとえあったとしても、それは独自のものです。 UI の状態 |
|
##ここで注目するのは this.props.children です。 this.props.children を通じて、コンポーネントの凝集度を簡単に低くすることができます。実際の開発では、純粋なコンポーネントで書かれた表示コンポーネントや、データを扱い続けるコンテナコンポーネントに遭遇することがよくあります。ここでは、単に this.props.children を使用してこれらのコンテナ コンポーネントをカバーします。その後、トラップされたコンテナ コンポーネントは、引き続き上記のルールに従って新しいフォルダーを作成し、index.js を公開できます。
この書き方の最大の利点は、作成したコンポーネントがどこにあるのか、何をするのか、何に影響を与えるのかをすぐに見つけられることです。
3. 上から下への一方向のデータ フロー
上記の条件を満たすように設計する必要がある場合、上から下への一方向のデータ フローを使用すると、何かを使用できるようになります。 redux のような状態管理ツールを使用すると、影響範囲をより制御しやすくなり、不要なレンダリングを減らすために shouldComponentUpdate が使用されます。 (ただし、このように書くのは本当に面倒ですが、React は v16.3 から新しいライフサイクル関数 getDerivedStateFromProps を使用して、開発者にこのステップの最適化を強制します)
4. 制御されたコンポーネントと制御されていないコンポーネント
d5fd7aea971a85678ba271703566ebfd、221f08282418e2996498697df914ce4e など、ユーザーの操作によって変更できる Web コンポーネントが多数あります。これらのコンポーネントは、コンテンツを入力するか、要素の value 属性を設定することによって、コンポーネントの値を変更できます。ただし、React は一方向のデータ フローに束縛されているため、これらのコンポーネントは制御不能になる可能性があります:
1. 値を独自の状態に保持する 0d8d8502ad9fc5bd029f7f31e30fdff5 コンポーネントは外部から変更できません
2プロパティを通じて値を設定する 0d8d8502ad9fc5bd029f7f31e30fdff5 コンポーネントは、外部コントロールを通じてのみ更新できます。
制御されたコンポーネント:
制御された d5fd7aea971a85678ba271703566ebfd には value 属性が必要です。制御されたコンポーネントをレンダリングすると、value 属性の値が表示されます。
制御されたコンポーネントはそれ自体の内部状態を維持せず、コンポーネントのレンダリングは純粋に props に依存します。つまり、props を通じて値を設定する d5fd7aea971a85678ba271703566ebfd コンポーネントがある場合、入力方法に関係なく、props.value のみが表示されます。つまり、コンポーネントは読み取り専用です。
制御されたコンポーネントを扱うときは、常に value 属性を渡し、onChange コールバック関数を登録してコンポーネントを変数にする必要があります。
非制御コンポーネント:
value 属性のない d5fd7aea971a85678ba271703566ebfd は、非制御コンポーネントです。レンダリングされた要素を通じて、ユーザー入力は即座に反映されます。 Uncontrolled d5fd7aea971a85678ba271703566ebfd は、OnChange 関数を通じてユーザーが入力した変更を上位層にのみ通知できます。
# ハイブリッド コンポーネント:
props.value と state.value の値を同時に維持します。表示では props.value の方が優先され、state.value はコンポーネントの実際の値を表します。 5. 高次コンポーネント (HOC) を使用する
簡単な定義: React コンポーネントをパラメーターとして受け取り、別のコンポーネントを返す関数。
できること: コードの再利用、コードのモジュール化、プロパティの追加、削除、および変更
ユースケース: たとえば、会社が突然フロントエンド コードに別のクリック ポイントを埋めたい場合、次のようにすることができます。 hoc は、元の部分を変更せずに 1 つのレイヤーをラップするためのもので、同時にコードも適切に変更されています。 6. 追加、削除、変更、およびクエリの標準プロセス
追加: データを入力し、データを検証し、データを挿入し、データ リストを再クエリします。
削除: 削除を確認し、データ リストを再度クエリします。
Check: データ リストのクエリ、ページングでの表示
Change: データの入力、データの検証、データの変更、データ リストの再クエリ実際には、その必要はありません。コンポーネントを設計するときに時期尚早にコンポーネント化すること。最初にバージョンをすばやく作成し、それを実際の設計に従って分割して、プロジェクトの初期段階での要件の急速な変化に対処できます。その後、デザインパターンに従って少しずつプロジェクトを変更していきますが、デザインパターンが適度に分割されていれば、実際には非常にスムーズで自然なことです。 プログラミング関連の知識について詳しくは、プログラミング ビデオ
をご覧ください。 ! ###