什麼是派生狀態?考慮文字的一種狀態,然後考慮大寫文字的另一種狀態。
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中文網其他相關文章!