React：狀態 X 派生狀態

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

匯出狀態

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