Je lisais la documentation de React Hook sur les mises à jour des fonctionnalités et j'ai regardé la citation suivante :
Les boutons "+" et "-" utilisent une forme fonctionnelle en raison des mises à jour Les valeurs sont basées sur les valeurs précédentes
Mais je ne vois pas quel est le but d'exiger des mises à jour de fonctionnalités et quelle est la différence entre elles et utiliser directement l'ancien état pour calculer le nouvel état.
Pourquoi la fonction de mise à jour de React useState Hook nécessite-t-elle un formulaire de mise à jour fonctionnelle ? Y a-t-il des exemples où nous pouvons clairement voir la différence (et donc utiliser la mise à jour directe provoquerait une erreur) ?
Par exemple, si je change cet exemple de la documentation
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
<button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
</>
);
}
Mettre à jour directementcount :
function Counter({initialCount}) {
const [count, setCount] = useState(initialCount);
return (
<>
Count: {count}
<button onClick={() => setCount(initialCount)}>Reset</button>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</>
);
}
Je ne vois aucune différence de comportement et je ne peux pas imaginer une situation où le décompte ne sera pas mis à jour (ou ne sera pas à jour). Parce que chaque fois que le nombre change, une nouvelle fermeture de onClick est appelée, capturant le dernier onClick 的新闭包，捕获最新的 count.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je suis tombé sur ce besoin récemment. Par exemple, disons que vous avez un composant qui remplit un tableau avec un certain nombre d'éléments et est capable d'ajouter à ce tableau en fonction d'une action de l'utilisateur (comme dans mon cas, je charge un flux 10 éléments à la fois parce que l'utilisateur garde Faites défiler vers le bas et le code ressemble un peu à ceci :
function Stream() { const [feedItems, setFeedItems] = useState([]); const { fetching, error, data, run } = useQuery(SOME_QUERY, vars); useEffect(() => { if (data) { setFeedItems([...feedItems, ...data.items]); } }, [data]); // <---- this breaks the rules of hooks, missing feedItems ... <button onClick={()=>run()}>get more</button> ...Évidemment, vous ne pouvez pas simplement ajouter feedItems à la liste des dépendances dans le hook useEffect car vous y appelez setFeedItems, vous serez donc coincé dans une boucle.
Mises à jour des fonctionnalités à la rescousse :
useEffect(() => { if (data) { setFeedItems(prevItems => [...prevItems, ...data.items]); } }, [data]); // <--- all good nowLes mises à jour d'état dans React sont asynchrones. Ainsi, lors de votre prochaine mise à jour, il se peut qu'il y ait d'anciennes valeurs dans
count. Par exemple, comparez les résultats de ces deux exemples de code :function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => { setCount(prevCount => prevCount + 1); setCount(prevCount => prevCount + 1)} }>+</button> </> ); }et
function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( <> Count: {count} <button onClick={() => setCount(initialCount)}>Reset</button> <button onClick={() => { setCount(count + 1); setCount(count + 1)} }>+</button> </> ); }