web-dev-qa-db-fra.com

Réagir: objet imbriqué en tant qu'Inte vs propriétés individuelles

Existe-t-il des cas d'utilisation où un objet imbriqué comme l'état est plus optimal/plus facile à travailler avec des propriétés individuelles?

Par exemple, si je voulais exprimer des contrôles d'utilisateur pour interagir avec une photo en état, je pouvais écrire quelque chose comme si (objet imbriqué):

this.state = {
   photoControls: {
      open: false,
      id: null,
      thumbnailUrl: null
   }
}

Ou je pourrais aussi l'écrire de cette façon (propriétés individuelles):

this.state = {
   photoControlsOpen: false,
   photoControlsId: null,
   photoControlsThumbnailUrl: null
}

Bien que je puisse logiquement des propriétés de groupe ensemble à l'aide d'un style d'état imbriqué à l'objet, il semble ne prouver que plus de verbose lors de la tentative de mise à jour d'un ou d'un couple, de ces propriétés.

Cela étant dit, quels sont les avantages (le cas échéant) d'utiliser des objets imbriqués en état, par opposition à l'utilisation de propriétés individuelles. Je comprends que les objets imbriqués puissent sensation plus approprié, mais je ne peux penser à aucun avantage pour eux, quiconque a une idée?

design-patternsjavascriptstatereactjs
6
connected_user

Cela dépend du développement futur probable. La création d'un objet séparé pour les photocontrols est une perte de temps et de code si l'objet n'est jamais réutilisé. Toutefois, si des photocontrols sont susceptibles d'être utilisés dans un autre objet, la définition séparément est bonne, mais uniquement si l'abstraction est vraiment utile. Si l'objet Photocontrols dans un autre objet doit avoir des attributs qui ne sont pas pertinents dans l'ancien contexte, vous avez peut-être construit un piège à bogues.

J'ai souvent regretté de créer des sous-objets quand ils étaient inutiles et ont été très heureux de les avoir créés lorsqu'ils étaient utiles. Pensez à ce que vous voudrez peut-être faire à l'avenir. Vous n'aurez pas toujours raison, mais en pensant à cela à l'avance, améliore vos chances.

1
MarvW

L'état d'abstraction pour l'audio/vidéo serait un bon exemple:

video: {
            readyState,
            networkState,
            error: error || networkState === 3,
            // TODO: This is not pretty. Doing device detection to remove
            // spinner on iOS devices for a quick and dirty win. We should see if
            // we can use the same readyState check safely across all browsers.
            loading: readyState < (/iPad|iPhone|iPod/.test(navigator.userAgent) ? 1 : 4),
            percentagePlayed: getPercentagePlayed(restState),
            percentageBuffered: getPercentageBuffered(restState),
            ...restState
        }

Références

0
Paul Sweatte