首頁  >  文章  >  web前端  >  React:狀態 X 派生狀態

React:狀態 X 派生狀態

Linda Hamilton
Linda Hamilton原創
2024-09-24 08:30:10231瀏覽

React: State X Derived State

什麼是派生狀態?考慮文字的一種狀態,然後考慮大寫文字的另一種狀態。

匯出狀態

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn