反応で考える

Mock Dataの使用方法について議論する前に、ReactがMock Dataを構成する方法を見てください.

1.UIを構成部品階層に分割する

すべての構成部品(サブ構成部品を含む)の周囲にボックスごとに名前を付ける必要があります.コンポーネントとして使用できるものに重点を置くと、新しい関数やオブジェクトを作成するように考えることができます.注意しなければならないのは、1つの要素が1つのことをすることです.

1つの要素が大きくなると、より小さなサブ要素に分離する必要があります.

合計5つのコンポーネントからなるアプリケーション.

FilterableProductTable
- SearchBar

ProductTable

ProductCategoryRow

ProductRow

2.reactを使用した静的バージョンの作成

レンダリングデータモデルのアプリケーションの静的バージョンを作成するには、他のコンポーネントを再利用するコンポーネントを作成し、propsを使用してデータを転送します.

propsは、親が子供にデータを渡すときに利用できる方法です.

静的バージョンを作成する場合、stateは使用されません.(時間が経つにつれてデータを変更する場合)

プロジェクトが大きいほど、構成部品は上向きになります(最大範囲の構成部品から作成されます).

階層構造の最上位コンポーネントはpropを使用してデータモデルを受信する.データモデルを変更した場合はReactDOM.レンダー()を再呼び出してUIを更新します.

3.UIステータスの最小表示を検索する

UIをインタラクティブにするために、Reactはstateを介してベースデータモデルを変更します.

stateの条件になる
1.親から道具で伝えるかどうか
2.時は流れても変わらないのか
3.構成部品内の他のstateまたはpropsが計算可能かどうか

4.stateを配置する場所を検索します(stateを変更または所有する構成部品を検索します)。

ステータスレンダリングに基づくすべての構成部品

を検索

共有構成部品を検索します.(階層構造では、特定の状態にある必要があるすべての素子の上部に1つの素子がある)

.

汎用またはそれ以上の構成部品は、ステータスを有している必要があります.

のステータスを持つ適切な構成部品が見つからない場合は、ステータスを持つ構成部品を作成し、共通の構成部品の最上位に追加します.

ex)

FilterableProductTable
- SearchBar

ProductTable

ProductCategoryRow

ProductRow

合計5つのコンポーネントに適用されるアプリケーション

ProductTableは、ステータスに基づいて商品リストをフィルタリングする必要があり、SearchBarは検索語とチェックボックスのステータスを表示する必要があります.

共有構成部品はFilterableProductTableです.

✔共通所有構成部品FilterableProductTableにstateを配置する必要があります.