J'ai un projet de réagisme et j'utilise l'API de contexte pour gérer l'état de l'application.
J'ai une liste d'articles avec un événement OnClick qui met à jour l'état dans le contexte. P>
Le problème est que lorsque l'état change tous les articles, les rapports, ce qui provoque un décalage. P>
Ma question est de savoir comment arrêter d'autres éléments de re-rendu si non cliqué sur. p> -Item.jsx
import React from "react";
import Item from "./Item";
const itemsList = [
{id: 1, name: 'a'},
{id: 2, name: 'b'},
{id: 3, name: 'c'},
{id: 4, name: 'd'}
]
const Items = () => (
<div>
{itemsList.map(i => (
<Item item={item}/>
)
)}
</div>
)
3 Réponses :
Qu'en est-il d'utiliser composants pur et prise de décision dans la méthode du cycle de vie < Un href = "https://reactjs.org/docs/react-component.html#shouldcomponentupdate" rel = "nOfollow NOREFERRER"> DépomponponUpdate ?
Si vous préférez rester avec des crochets ici est Une documentation officielle Comment mettre en œuvre la méthode de cycle de vie mentionnée avec une approche de crochets.
Merci pour votre réponse. J'essayais de trouver une solution pour des composants fonctionnels. Pensez-vous qu'il est tout simplement préférable d'utiliser si vous devriez utiliser une composante pure et c'est tout?
d'accord merci. Je vais essayer. Mais aucune idée de comparer l'état de contexte pour décider de re-rendre ou non?
Si vous souhaitez coller avec des composants fonctionnels, j'ai étendu ma réponse en lien vers des méthodes de cycle de vie dans les crochets. La composante pure peut être une solution, cela vaut la peine d'essayer.
Vérifiez cet article pour expliquer sur la comparaison du contexte. MOYEN.COM/@tungsheng/... < / a>
@Bartosz lorsque le contexte change, tous les consommateurs sont notifiés (RÉRENDÉ). Puisque votre composant est un composant fonctionnel, celui-ci sera RERENDRE ALAWYS. Si vous voulez l'empêcher de l'empêcher, vous avez besoin d'une tabulation dans ShabComponentupdate.
Vous pouvez étendre Option 1. P> réact.purecomonent code> si votre élément des accessoires de composant d'élément code> sont tous sérialisés ou que vous étends réact.component code> et implémentez devrait . export class Item extends PureComponent {
render() {
const { item } = this.props;
return (
<MainContext.Consumer>
{({ handleSelectItem }) => (
<div>
<button onClick={() => handleSelectItem(item)}>{item.name}</button>
</div>
)}
</MainContext.Consumer>
);
}
}
usecallback ou USEMEMO Hooks pour les mémotiliser. afin qu'ils ne cassent pas votre purecomponent
- envisagez d'utiliser réact-fenêtre https://github.com/bvaughn/react-window Pour mettre en œuvre le défilement virtuel au lieu de rendre 200 articles pouvant être masqués pour l'utilisateur et ne doivent pas avoir besoin d'être dans le ralentissement de DOM.
item.jsx xxx éléments.jsx xxx
Merci mais j'ai une erreur que je ne peux pas utiliser usersallback à l'intérieur d'une fonction de cette façon
@ welly4412 oui Vous ne pouvez pas utiliser des crochets dans des fonctions ou des cnonditionnels, ils doivent être sur la fonction de réaction de niveau supérieur, voir réactjs.org/docs/hooks-rules.html