J'ai ce code .
et voici l'extrait de code
const [indicators, setIndicators] = useState([]);
const [curText, setCurText] = useState('');
const refIndicator = useRef()
useEffect(() => {
console.log(indicators)
}, [indicators]);
const onSubmit = (e) => {
e.preventDefault();
setIndicators([...indicators, curText]);
setCurText('')
}
const onChange = (e) => {
setCurText(e.target.value);
}
const MemoInput = memo((props)=>{
console.log(props)
return(
<ShowIndicator name={props.name}/>
)
},(prev, next) => console.log('prev',prev, next)
);
Il montre chaque indicateur à chaque fois que j'ajoute dans le formulaire.
Le problème est que ShowIndicator se met à jour chaque fois que j'ajoute quelque chose.
Y a-t-il un moyen pour moi de limiter le temps de rendu de mon application parce que par exemple j'ai créé 3 ShowIndicators , puis il sera également rendu 3 fois Je pense que c'est très coûteux à long terme.
Je pense également à utiliser useRef juste pour ne pas rendre mon application à chaque fois que je saisis un nouveau texte, mais je ne suis pas sûr que ce soit la bonne implémentation car la plupart des documentations recommandent d'utiliser des composants contrôlés en utilisant l'état comme gestionnaire de la valeur actuelle.
3 Réponses :
React.memo arrêtera le rendu de votre composant enfant si les rendus parent (et si les accessoires sont identiques), mais cela n'aide pas dans votre cas car vous avez défini le composant dans votre composant App. Chaque fois que App est rendu, vous créez une nouvelle référence de MemoInput.
Exemple mis à jour: https://codesandbox.io/s/currying-tdd-mikck < / a>
Lien vers Sandbox:
https://codesandbox.io/s/musing- kapitsa-n8gtj
App.js
import React from "react";
const ShowIndicator = ({ name }) => {
console.log("rendering showIndicator");
const renderDatas = () => {
return <div key={name}>{name}</div>;
};
return <>{renderDatas()}</>;
};
export default React.memo(ShowIndicator); // EXPORT React.memo
ShowIndicator.js
// const MemoInput = memo(
// props => {
// console.log(props);
// return <ShowIndicator name={props.name} />;
// },
// (prev, next) => console.log("prev", prev, next)
// );
const renderList = () => {
return indicators.map((data,index) => {
return <ShowIndicator key={index} name={data} />;
});
};
En observant le comportement donné de l'application sandbox, il semble que l'ensemble de l'application effectue un rendu n fois lorsqu'il y a n indicateurs .
J'ai bifurqué le bac à sable et déplacé la liste vers un autre composant fonctionnel (et le mémo l'a modifié en fonction des accessoires prev et next .
/ p>
Cela garantira que ma «liste» sera rendue chaque fois qu'un nouvel indicateur est ajouté. L'application entière ne sera rendue que lorsqu'un nouvel indicateur est ajouté à la liste.
Découvrez ce bac à sable issu du vôtre - https://codesandbox.io/ incorporer / éviter-re-rendre-react-l4rm2
pensez-vous qu'il est correct d'utiliser useRef pour la valeur de texte?
React.org recommande d'éviter d'utiliser des refs pour tout ce qui peut être fait de manière déclarative. Pour cela, vous pouvez conserver la valeur de texte disponible à l'état parent et la transmettre comme accessoires.
Chaque fois que vous mettez à jour l'état via un hook ou un appel, le composant setState sera forcé de restituer pour afficher le changement, il existe un moyen secondaire de faire le changement d'état sans le rendre au lieu de faire => this.setState ({data: "any value "}) faites ceci this.state.data =" any value ", car cela ne sera pas rendu et affichera tous les changements, mais il changera d'état.