Comment gérer les accessoires de modifications sans l'aide de componentWillReceiveProps à Réagir
J'ai travaillé sur un projet qui est codé à l'aide de Réagir. J'ai un jeu de composants que j'ai mis en place de nombreux composants pour mes propres besoins. Beaucoup de ceux-ci agissent comme un composant composite. Par exemple, zone de texte composant qui a son propre label, propre message d'erreur mécanisme et propre filtre d'entrée etc. En outre, vous le savez, les composants ont des accessoires afin de gérer les géohelminthiases.
À chaque fois de mettre à jour ma vue component (render), j'utilise componentWillReceiveProps
et je compare les accessoires changements.
Mais à chaque fois la mise en œuvre de la componentWillReceiveProps
méthode est tellement répugnant.
Est-il un moyen de passer des accessoires de haut en bas sans l'aide de componentWillReceiveProps
. Je ne veux pas comparer les accessoires modifications manuellement. Est-il possible de le faire automatiquement.
Quand j'ai changer les accessoires parent, je voudrais mettre à jour tous les points de vue simplement la modification de certains prop valeurs de haut en bas.
Je ne suis pas réagir d'experts et de la performance n'est pas mon premier but aussi!
Une chose de plus que la réponse n'est pas use Redux
!
Je suis en attente de vos approches créatives et des idées utiles.
- Il n'est pas clair ce qu'est la question - vous avez seulement besoin de mettre en œuvre
componentWillReceiveProps
si il y a quelque chose de spécifique que vous voulez à faire en réponse à (potentiellement) mise à jour des accessoires. - Quand j'ai changer les accessoires dans mon conteneur parent, je voudrais mettre à jour tous les points de vue de haut en bas.
- Vous n'avez pas besoin de mettre en œuvre
componentWillReceiveProps
pour faire de vos composants réactifs. Je ne comprends pas votre question? - Que la propagation est gérée par Réagir de lui-même.
- Je vais vérifier mon nouveau les composants. J'attends comme vous l'avez dit, mais quelque chose d'étrange et il ne fonctionne pas comme ça.
- Cool. Si vous ne pouvez pas comprendre ce qui est en place, il serait utile de faire bouillir cela par un exemple de code pour illustrer le problème que vous avez vu.
Vous devez vous connecter pour publier un commentaire.
Sans voir le code de la chose en particulier que vous travaillez sur, j'ai peut-être raté quelque chose au sujet de ce que vous faites...
Comme d'autres l'ont fait observer, Réagir ré-rendu de votre composant si de nouveaux accessoires sont fournis, indépendamment de savoir si ou de ne pas vous mettre en œuvre
componentWillReceiveProps
-- la seule raison pour la mettre en œuvre est de faire une sorte de comparaison spécifique ou un ensemble d'un état basé sur la nouvelle prop valeurs.De l'Réagissent docs (l'emphase est mienne):
En d'autres termes, si vous disposez d'un composant comme:
<TextBox title={"Foo"} content={"Bar"} />
Que l'interne passe prop changements sur un couple de composants enfants comme:
À chaque fois que de nouveaux accessoires sont passés à
<TextBox>
,<Title>
et<Body>
sera également obtenir un nouveau rendu avec leur nouveautext
les accessoires, et il n'y a pas de raison d'utilisercomponentWillReceiveProps
si vous êtes simplement à la recherche de mise à jour avec prop changements. Réagir automatiquement voir les changements et les rendre à nouveau. Et de Réagir poignées de comparaison et devrait assez rapidement un nouveau rendu des seules choses qui ont changé.Toutefois, si vous avez un état de la valeur doit être définie en réponse à des accessoires, par exemple, si vous voulais montrer un "changé" de l'état (ou autre) sur le composant si les nouveaux accessoires sont différents, alors vous pourriez mettre en œuvre
componentWillReceiveProps
, comme:Si vous essayez d'empêcher un nouveau rendu dans les cas où il n'est pas nécessaire pour la performance, faire comme Andreï suggère et l'utilisation
shouldComponentUpdate
: https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdateTLDR; sauf si vous êtes réglage de l'état des composants d'accessoires, il y a probablement plus besoin de courir de nouveaux accessoires par le biais de
componentWillReceiveProps
Mise à JOUR Février 2018: dans une version future, de Réagir sera autodérision
componentWillReceiveProps
en faveur de la nouvellegetDerivedStateFromProps
, plus d'infos ici: https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193bIl y a quelques suggestions:
componentWillReceiveProps
- juste rendre directement à partir dethis.props
shouldComponentUpdate
sous forme générique comme conseillé ici https://facebook.github.io/react/docs/shallow-compare.htmlL'approche générale, comment développer la boîte à textes comme des composants est de le garder apatrides.Composant rend les accessoires directement, et en informe composant parent au sujet des changements, il ne se soucie de la gestion de la valeur.
Espère que cela aidera
Veuillez considérer
pureComponent
qui, par defualt met en œuvre lashouldComponentUpdate
à l'intérieur de laquelle peu profonde est égal à est utilisé pour la comparaison entre la précédente et la suivanteessayez codes suivants:
class MyComponent extends PureComponent {...}