web-dev-qa-db-fra.com

Dois-je définir des classes de modèle?

React utilise l'architecture Flux et il est dit dans https://reactjs.org/docs/thinking-in-react.html que React a deux modèles - state et props. Et il y a quelques suggestions pour la gestion des modèles dans React https://reactjs.org/community/model-management.html - mais tout cela semble à quelques couches supplémentaires pour améliorer le Flux.Les grandes questions auxquelles je cherche les réponses sont:

  • Dois-je définir des classes de modèle dans React? C'est à dire. si j'ai une notion de classe Client, alors je peux: 1) définir les attributs de Client directement comme les attributs de state/props 2) définir les attributs de Client comme les attributs de state.customer/props.customer; 3) définissez un modèle/classe JavaScript Customer séparément et dites simplement que state.customer/props.customer est de type Customer et ne répète pas les attributs dans le state/props. Je pense que 3) est la bonne approche, n'est-ce pas?
  • Si la 3e option (du point précédent) est la bonne approche, alors comment puis-je définir le modèle Customer et comment puis-je définir ce state.customer/props.customer est de ce modèle? Je pourrais utiliser ces modèles dans certaines sérialisations, certaines tâches de validation de modèles et je pourrais également les utiliser dans le projet ReactNative.
javascriptreactjsclassreact-nativeflux
3
TomR

La manière la plus élémentaire est indiquée dans l'extrait de code suivant:

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 />
      </>
    )
  );

L'endroit où vous définissez ces accessoires dépend de l'endroit où vous en avez besoin. Si un seul composant a besoin des accessoires, vous les définissez dans cet état de composants. Mais souvent, vous avez besoin des accessoires dans plusieurs composants, donc vous soulevez-les dans votre hiérarchie . Cela se traduit souvent par un composant très "intelligent" (un composant qui a un grand état).

Si votre application devient volumineuse et déroutante, je vous suggère de stocker votre état en externe. Pour ce faire, vous pouvez utiliser réagir au contexte . Il vous permet d'injecter des accessoires aux composants qui en ont besoin, plutôt que de passer plusieurs couches dans votre hiérarchie.

Si vous ne voulez pas écrire votre propre contexte, vous pouvez utiliser des solutions de gestion d'état comme redux ou mobx . Ils utilisent également le contexte, mais fournissent des fonctions pratiques pour connecter facilement un composant à votre état externe.

2
Neskews