Réagir: composant Parent re-rend tous les enfants, même ceux qui n'ont pas changé de changement d'état
Je n'ai pas pu trouver de réponse claire à cette, espérons que ce n'est pas répétitif.
Je suis à l'aide de Réagir + Redux pour une simple application de chat. L'application est composée d'un InputBar, MessageList, et le composant Conteneur. Le Conteneur (comme vous pouvez l'imaginer) enveloppe les deux autres composantes et est connecté à la boutique. L'état de mes messages, ainsi que du message (le message que l'utilisateur est en train de taper) est maintenu dans la Redux magasin. Structure simplifiée:
class ContainerComponent extends Component {
...
render() {
return (
<div id="message-container">
<MessageList
messages={this.props.messages}
/>
<InputBar
currentMessage={this.props.currentMessage}
updateMessage={this.props.updateMessage}
onSubmit={this.props.addMessage}
/>
</div>
);
}
}
La question que je vais avoir se produit lorsque la mise à jour du message en cours. La mise à jour du message déclenche une action que les mises à jour de la boutique, qui met à jour les accessoires en passant par conteneur et de retour à la InputBar composant.
Cela fonctionne, cependant, un effet secondaire est que mon MessageList composant se faire ré-rendu à chaque fois que cela se produit. MessageList ne reçoit pas le message en cours et n'ont pas de raison de mettre à jour. C'est un gros problème car une fois que le MessageList devient grand, l'application devient beaucoup plus lent à chaque fois le message en cours de mises à jour.
J'ai essayé de réglage et de la mise à jour de l'actuel état d'un message directement à l'intérieur de la InputBar composant (donc en ignorant complètement la Redux de l'architecture) et qui "résout" le problème, cependant, j'aimerais rester avec Redux modèle de conception, si possible.
Mes questions sont:
-
Si un composant parent est mis à jour, ne Réagit pas toujours de mise à jour de tous les enfants directs au sein de ce composant?
-
Quelle est la bonne approche?
- même si render() est exécuté, il doit être rapide - il ne sera pas mise à jour le DOM à tous sauf si il y a des changements réels. donc re-rendu des enfants ressemble le plus sûr de comportement pour moi. Cependant je n'ai pas fait de savoir si de réagir est censé le faire, donc ce n'est pas une réponse
Vous devez vous connecter pour publier un commentaire.
Pas. Réagir ne re-rendu d'un composant si
shouldComponentUpdate()
retournetrue
. Par défaut, cette méthode renvoie toujourstrue
pour éviter toute bogues subtils pour les nouveaux arrivants (et que William B souligné, les DOM ne sera pas fait de mise à jour, à moins que quelque chose a changé, l'abaissement de l'impact).Pour éviter que votre sous-composant de rendu inutilement, vous avez besoin pour mettre en œuvre les
shouldComponentUpdate
méthode de telle manière qu'il ne retournetrue
lorsque les données ont changé. Sithis.props.messages
est toujours la même matrice, il pourrait être aussi simple que cela:Vous pouvez également faire une sorte de comparaison en profondeur ou de comparer l'Id de message ou quelque chose, cela dépend de vos exigences.
componentDidMount
?(this.props.messages !== nextProps.messages)
), que tous les messages sont affichésshouldComponentUpdate
, un parent toujours rerender tous ses enfants?React.Component
(et pasReact.PureComponent
ou quelque chose de similaire), alors oui, il sera toujours un nouveau rendu.Si le composant parent accessoires ont changé de re-rendre tous ses enfants qui sont faites à l'aide de
React.Component
déclaration.Essayez de faire votre
<MessageList>
composant unReact.PureComponent
éviter cela.Selon Réagir docs:
In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.
cochez cette lien pour plus d'infoEspère que cela aide quelqu'un qui est à la recherche de la bonne façon de résoudre ce problème.