派生状態とは何ですか?テキストに対して 1 つの状態を考えてから、uppercaseText に対して別の状態を考えてください。
派生状態
1 2 3 4 5 6 7 8 9 10 | function Foo() {
const [text, setText] = useState( 'hello, za warudo!' );
const [uppercaseText, setUppercaseText] = useState(text.toUpperCase());
useEffect(() => {
setUppercaseText(text.toUpperCase());
}, [text])
...
}
|
ログイン後にコピー
そうは言っても、誰かがこれを行うと考えるのはクレイジーです...そうですよね?そうですよね?
はい、このような例を見れば、これが間違っていることがわかります。
派生状態の悪い点
- 実際の状態とは同期せずに個別に保存されます。
- 不要な再レンダリングに応じてトリガーされます。
派生状態をリファクタリングするにはどうすればよいですか?
それは高価な計算だと言えます...解決策は useMemo を使用することです。
1 2 3 4 5 | function Foo() {
const [text, setText] = useState( 'hello, za warudo!' );
const uppercaseText = useMemo(() => text.toUpperCase(), [text]);
...
}
|
ログイン後にコピー
導出可能な状態を素早く特定するにはどうすればよいでしょうか?
私は、状態が「別の状態」であるべきなのか、それとも単なる計算されたプロパティ (場合によっては記憶されるか否か) であるべきかを知るを容易にする良い考え方を思いつきました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function Foo({
text = 'hello, za warudo!' ,
uppercaseText = text.toUpperCase(),
}) {
...
}
const text = 'hello, za warudo!' ;
Foo({
text,
uppercaseText: text.toUpperCase(),
});
|
ログイン後にコピー
これらの状態を「小道具」と考えると、それがあるべき姿がより露骨になります。
React を完全に忘れて、関数だけを考えてください:
変数を使用して関数を呼び出してから、内部で計算できる別の変数を呼び出しますか?
以上がReact: 状態 X 派生状態の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。