Reagieren: Abgeleiteter Zustand von Zustand X

Was ist ein abgeleiteter Zustand? Denken Sie an einen Zustand für Text und dann an einen anderen für Text in Großbuchstaben.

Abgeleiteter Zustand

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

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

    ...
}

Wenn man das so ausdrückt, ist es verrückt zu glauben, dass irgendjemand so etwas tun würde ... oder? RICHTIG?

Ja, ein Beispiel wie dieses wird deutlich machen, dass das falsch ist.

Das Schlechte des abgeleiteten Staates

• Gesondert gespeichert und nicht mit dem tatsächlichen Status synchronisiert.
• Triggert (abhängig) von unnötigen erneuten Renderings.

Wie kann der abgeleitete Zustand umgestaltet werden?

Angenommen, es ist eine teure Berechnung … die Lösung ist die Verwendung von useMemo.

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

Wie erkennt man schnell einen Zustand, der abgeleitet werden kann?

Ich habe eine gute Denkweise entwickelt, die es einfacher machen sollte, WISSEN, ob ein Zustand „ein anderer Zustand“ oder nur eine berechnete Eigenschaft sein sollte (je nach Fall gespeichert oder nicht).

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(),
});

Wenn Sie sich diese Zustände als „Requisiten“ vorstellen, dann wird es deutlicher, was es sein sollte.

Vergessen Sie React vollständig, denken Sie nur an Funktionen:
Würden Sie eine Funktion mit einer Variablen und dann einer anderen Variablen aufrufen, die Sie einfach darin berechnen könnten?

Das obige ist der detaillierte Inhalt vonReagieren: Abgeleiteter Zustand von Zustand X. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!