web-dev-qa-db-ja.com

モデルクラスを定義する必要がありますか？

ReactはFluxアーキテクチャを使用しており、それは https://reactjs.org/docs/thinking-in-react.html に記載されていますReactには2つのモデルがあります-stateとprops。そしてReact https://reactjs.org/community/model-management.html -しかし、これらすべてはFluxを強化するためのいくつかの追加レイヤーのようです。私が回答を求めている大きな質問は次のとおりです。

  • Reactでモデルクラスを定義する必要がありますか？つまりCustomerクラスの概念がある場合、次のことができます。1）Customerの属性をstate/propsの属性として直接定義します2）Customerの属性をstate.customer/props.customerの属性として定義します。 3）JavaScriptテンプレート/クラスCustomerを個別に定義し、state.customer/props.customerのタイプはCustomerであり、state/propsで属性を繰り返さないようにしてください。 3）は正しいアプローチだと思いますね。
  • （前のポイントの）3番目のオプションが適切なアプローチである場合、Customerテンプレートをどのように定義し、state.customer/props.customerがこのテンプレートであることをどのように定義できますか？これらのテンプレートは、いくつかのシリアル化、いくつかのモデル検証タスクでも使用でき、ReactNativeプロジェクトでも使用できます。
javascriptreactjsclassreact-nativeflux
3
TomR

最も基本的な方法を次のスニペットに示します。

const Customer = ({ name, age }) => (
  <div>
    <p>Name: {name}</p>
    <p>Age: {age}</p>
  </div>
);

const App = () =>
  [{ name: "Bert", age: 22 }, { name: "Alfons", age: 45 }].map(
    ({ name, age }, i) => (
      <>
        <Customer key={i} name={name} age={age} />
        <hr />
      </>
    )
  );

これらの小道具をどこに定義するかは、どこに必要かによって異なります。 1つのコンポーネントのみが小道具を必要とする場合、そのコンポーネントの状態でそれらを定義します。しかし、多くの場合、いくつかのコンポーネントで小道具が必要になるため、あなたは 階層内でそれらを持ち上げます です。その結果、非常に「スマート」なコンポーネント（状態の大きいコンポーネント）が生成されることがよくあります。

アプリが大きくなって混乱する場合は、状態を外部に保存することをお勧めします。これを行うには、 react context を使用できます。階層内のいくつかのレイヤーに渡すのではなく、それを必要とするコンポーネントに小道具を注入することができます。

独自のコンテキストを記述したくない場合は、 redux または mobx のような状態管理ソリューションを使用できます。これらもコンテキストを使用しますが、コンポーネントを外部状態に簡単に接続するための便利な機能を提供します。

2
Neskews