我正在閱讀 React 檔案，但有一個主題我不太了解：
https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
function Counter() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();
useEffect(() => {
prevCountRef.current = count;
});
const prevCount = prevCountRef.current;
return <h1>Now: {count}, before: {prevCount}</h1>;
}
演示：
https://codesandbox.io/s/get-previous-state-ref--hook-faq-w0f3k?file=/src/App.js
我想要一個更好的解釋。怎么樣，它是如何作業的？謝謝
uj5u.com熱心網友回復：
這里有三塊。一個狀態、一個參考和一個效果。
狀態是在渲染之間記住的值，并且在更改時重新渲染它的組件。
參考（或ref）是一個像 state 一樣在渲染之間持續存在的值，但與 state 不同的是，它不會被監視任何變化并且可以自由變異。對 refs 的更改永遠不會導致渲染。
效果只是一個在渲染之后運行的函式，或者在它的一個依賴項中的渲染自上次渲染之后發生變化之后運行。
所以把它們放在一起就是會發生的事情：
const [count, setCount] = useState(0);
這里宣告了一個狀態。setCount使用新值呼叫將導致組件呈現，并且當它呈現時，count將具有設定的值。
const prevCountRef = useRef();
然后宣告參考。這將保存對先前計數值的參考。現在它沒有值 ( undefined)，考慮到組件第一次渲染時沒有先前的值，這是有道理的。
useEffect(() => {
prevCountRef.current = count;
});
現在宣告一個在每次渲染后運行的效果（你可以告訴它，因為它沒有依賴項（將是 的第二個引數）。當它運行時，它會將 的當前值設定為任何計數。useEffect()prevCountRef
所以，在第一次渲染時，用偽代碼：
// render starts
count // 0
prevCountRef.current // undefined
// render finishes
effect runs {
prevCountRef.current is set to 0
}
因此，當渲染發生時，count狀態為0，而先前的計數 ref 為undefined。
第二個渲染：
setCount(1) // triggers the second render
// second render starts
count // 1
prevCount.current // 0
// second render finishes
effect runs {
prevCount.current is set to 1
}
如您所見，在渲染程序中，您始終將當前計數作為狀態，將先前計數作為參考。這是有效的，因為設定 refs 值的效果總是在渲染完成后運行，這允許它是以前的任何值。
uj5u.com熱心網友回復：
您可以使用 componentDidUpdate 來獲取上一個道具和狀態。當你擴展 React.Component 時，它會在每次渲染后呼叫 componentDidUpdate。你定義了函式，React 會將 prev props 和 prev state 傳遞給你。
https://reactjs.org/docs/react-component.html#componentdidupdate
uj5u.com熱心網友回復：
useEffect在組件渲染之后呼叫。組件第一次渲染 prevCount 是undefined因為 useEffect 還沒有被呼叫。
預渲染：
1) value: 0, prevCount: undefined
渲染后：useEffect 被呼叫：
2) value: 0, prevCount: 0 useRef不會導致新的渲染，因此組件不會更新。refCount 將顯示為未定義。
當您更改計數值時，組件會重新渲染：
預渲染：
3) value: 1, prevCount: 0 useEffect 還沒有被呼叫。
渲染后：
4) value: 1, prevCount: 1 useEffect 被呼叫，prevCount 增加但組件沒有更新所以 prevCount 將顯示值 = 0；
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/376256.html
標籤：javascript 反应 用户界面 状态 钩