web-dev-qa-db-fra.com

React props: Dois-je transmettre l'objet ou ses propriétés? Cela fait-il une grande différence?

Lors du passage d'accessoires, dois-je passer tout l'objet dans les composants enfants ou dois-je d'abord créer individuellement des accessoires dans le composant parent, puis transmettre ces accessoires à l'enfant?

Passer l'objet entier:

<InnerComponent object={object} />

Créez individuellement les accessoires dont vous avez besoin en premier:

<InnerComponent name={object.name} image={object.image} />

Laquelle est préférée et si cela dépend, que dois-je utiliser comme jauge à utiliser?

javascriptreactjsreact-props
17
catandmouse

Vous devriez préférer votre deuxième exemple, pour passer les accessoires individuellement. Vous pouvez y voir explicitement quels arguments sont passés et comparer rapidement avec quels arguments sont attendus. Cela facilite la collaboration avec les gens et rend l'état de l'application plus clair.

J'essaie personnellement d'éviter de passer des objets entiers si ce n'est pas nécessaire. C'est comme l'opérateur de propagation où il peut y avoir n'importe quelle propriété à l'intérieur et il est beaucoup plus difficile de déboguer dans une plus grande portée.

Certains ajouts à Pure réagissent comme prop-types ou TypeScript pourrait aider à définir des propriétés claires et attendues dans une grande application

8
mstruebing

Puisque JavaScript n'a pas d'annotation de type, le deuxième choix serait bien préférable, comme mentionné par @mstruebing, le code sera plus facile à maintenir. Cependant, si vous utilisez TypeScript React (qui prend en charge les annotations de type), les deux choix seraient tout aussi clairs. Mais gardez à l'esprit que le premier choix favorise un couplage étroit entre les vues et les modèles, cela permet développement rapide car vous n'avez pas besoin de taper beaucoup; tandis que le deuxième choix peut ralentir le développement mais vous avez une flexibilité et une tolérance plus élevées aux changements futurs.

Ainsi, la jauge est: si vous préférez la vitesse de développement à la flexibilité, optez pour le choix 1; si vous préférez la flexibilité à la vitesse de développement, optez pour le choix 2.

Notes supplémentaires

Ok, quand devrions-nous privilégier la vitesse de développement à la flexibilité? Voici mes 2 cents.

Si votre projet était destiné à une utilisation à court terme (par exemple, développer une application uniquement pour collecter des votes lors des élections), optez pour le premier choix.

Si votre projet était destiné à une utilisation à long terme (par exemple, un portail de transactions bancaires en ligne), vous devriez opter pour le deuxième choix.

5
Wong Jia Hau

Selon le principe du moindre privilège , c'est une façon correcte:

<InnerComponent name={object.name} image={object.image} />

Cela empêche InnerComponent de modifier accidentellement l'objet d'origine ou d'accéder à des propriétés qui ne lui sont pas destinées.

Alternativement, les propriétés pourraient être choisies à partir de l'objet d'origine et transmises comme accessoires:

<InnerComponent {...pick(object, 'name', 'image')} />

S'il existe de nombreuses propriétés fastidieuses à répertorier, il peut y avoir un seul accessoire qui accepte un objet:

<InnerComponent object={pick(object, 'name', 'image')} />
4
Estus Flask

Si vous n'utilisez pas toutes les propriétés de l'objet, il vaut mieux passer séparément les propriétés requises car cela peut aider à l'optimisation des performances lorsque le composant Child est un PureComponent d'utilisation shouldComponentUpdate. Dans un tel cas, uniquement lorsque les accessoires utilisés par le composant Child changent, son rendu sera rendu et non lorsqu'une propriété inutilisée de l'objet a changé.

Cependant, si vous utilisez toutes les propriétés de l'objet, cela ne fait pas vraiment de différence si vous transmettez l'objet comme accessoire, à condition de gérer correctement les mutations de l'objet.

2
Shubham Khatri

Passer plusieurs accessoires à un composant enfant est le moyen préféré de passer des accessoires aux composants enfants. Cela vous aidera à suivre l'état de l'application dans le composant enfant. N'hésitez pas non plus à utiliser le prop-types module. Il agit comme des génériques dans Java et fournit une sécurité de type pour les accessoires à passer.

2
Souvik Dey

Cela dépend de cet objet. Avez-vous besoin que TOUTES ses propriétés soient transmises à un autre composant? Ou ... Vous pourriez avoir besoin de passer 2 propriétés sur 5 à un composant spécifique?

  • Si vous n'avez pas besoin de transmettre TOUTES ses propriétés, je recommande de passer le Properties comme Props
  • MAIS, si vous êtes sûr à 100% que vous AVEZ BESOIN DE TOUTES LES PROPRIÉTÉS à passer ensemble, je recommande de passer tout le Object comme Props dans ce cas car ce serait un code beaucoup plus clair et vous garderait loin de l'oubli de passer quelque chose. Par exemple; Lorsque vous ajoutez une nouvelle propriété à cet objet, vous n'avez pas besoin de la transmettre, car vous passez déjà tout l'objet!

Eh bien, si vous n'êtes pas certain de votre objectif actuel/futur de cet objet, car vous devrez peut-être bientôt EXCLURE certaines propriétés, vous devriez probablement transmettre ses propriétés individuellement dans ce cas, au lieu de transmettre certaines propriétés non utilisées à l'autre composant. .

1
Elharony