Réagir : état dérivé de l'état X

Qu'est-ce qu'un état dérivé ? Pensez à un état pour le texte, puis à un autre pour le texte majuscule.

État dérivé

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());

    useEffect(() => {
        setUppercaseText(text.toUpperCase());
    }, [text])

    ...
}

En disant ça, c’est fou de penser que quelqu’un ferait ça… non ? N'est-ce pas ?

Oui, un exemple comme celui-ci montrera clairement que c'est faux.

Le mauvais de l’état dérivé

• Stocké séparément et désynchronisé avec l'état réel.
• Déclencheurs (dépendent) de nouveaux rendus inutiles.

Comment refactoriser l’état dérivé ?

Disons que c'est un calcul coûteux… la solution est d'utiliser useMemo.

function Foo() {
    const [text, setText] = useState('hello, za warudo!');
    const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
    ...
}

Comment repérer rapidement un état pouvant en être dérivé ?

J'ai trouvé une bonne façon de penser qui devrait permettre de SAVOIR plus facilement si un état doit être « un autre état » ou simplement une propriété calculée (mémorisée ou non selon les cas).

function Foo({
    text = 'hello, za warudo!',
    uppercaseText = text.toUpperCase(),
}) {
    ...
}

// Forget react for a moment...
// Would you ever call a function like this?
const text = 'hello, za warudo!';
Foo({
    text,
    uppercaseText: text.toUpperCase(),
});

Si vous considérez ces états comme des « accessoires », alors cela en fait de manière plus flagrante ce qu'ils devraient être.

Oubliez complètement React, pensez uniquement aux fonctions :
Appelleriez-vous une fonction avec une variable, puis une autre variable dans laquelle vous pourriez simplement calculer ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!