React: 状態 X 派生状態

派生状態とは何ですか?テキストに対して 1 つの状態を考えてから、uppercaseText に対して別の状態を考えてください。

派生状態

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

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

    ...
}

そうは言っても、誰かがこれを行うと考えるのはクレイジーです...そうですよね？そうですよね?

はい、このような例を見れば、これが間違っていることがわかります。

派生状態の悪い点

• 実際の状態とは同期せずに個別に保存されます。
• 不要な再レンダリングに応じてトリガーされます。

派生状態をリファクタリングするにはどうすればよいですか?

それは高価な計算だと言えます...解決策は useMemo を使用することです。

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

導出可能な状態を素早く特定するにはどうすればよいでしょうか?

私は、状態が「別の状態」であるべきなのか、それとも単なる計算されたプロパティ (場合によっては記憶されるか否か) であるべきかを知るを容易にする良い考え方を思いつきました。

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

これらの状態を「小道具」と考えると、それがあるべき姿がより露骨になります。

React を完全に忘れて、関数だけを考えてください:
変数を使用して関数を呼び出してから、内部で計算できる別の変数を呼び出しますか?

以上がReact: 状態 X 派生状態の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。