每次Comp重新渲染，rand都會有不同的值。會觸發useEffect嗎？
function Comp({}) {
const rand = Math.random();
useEffect(() => {
// do stuff
}, [rand])
}
uj5u.com熱心網友回復：
依賴項陣列中的變數與它是一個state帶有 some 的集合這一事實無關setState。只要它在陣列中并且它發生變化，useEffect就會再次呼叫 's 回呼。現在，如何useEffect注意到這種變化？好吧，每當組件渲染時，它都會產生差異。并且只有state帶有 a 的集合setState才能重新渲染組件。
我做了一個例子來解釋更多。如果你已經理解了這個機制，你可以在這里停下來，用 React 構建你的驚人產品 :)。否則，請繼續閱讀。
假設我們有這個組件：
export default function Comp() {
let rand = Math.random();
useEffect(() => {
console.log("Hello Word");
}, [rand]);
return (
<button onClick={() => { rand = Math.random() }}>
New value
</button>
);
}
我們應該Hello Word在組件第一次渲染時登錄控制臺，并且每次都rand發生變化。單擊該button更改rand，但我們不會有新的日志，因為沒有任何重新渲染，因為沒有state更改。并且由于沒有重新渲染，useEffect因此不知道更改。
現在讓我們使用相同的組件，并對其進行一些更改：
export default function Comp() {
const [state, setState] = useState(true); // new line added
let rand = Math.random();
useEffect(() => {
console.log("Hello Word");
}, [rand]);
// notice that the click handler has changed
return (
<button onClick={() => setState(!state)}>
New value
</button>
);
}
現在每次單擊按鈕時組件都會重新渲染，因為我們設定了一個statewith setState，并且在重新渲染時，如果值rand與之前的值相比發生了變化，我們將得到一個新的日志。
但是由于我們使用的是兩個渲染，
Math.random()我們可以有兩個相似的值rand，在這種情況下不會有新的日志。
uj5u.com熱心網友回復：
每次重新渲染組件時，Math.random都會評估該方法，因此它將導致useEffect再次運行（除了rand已更改的例外）。
相反，如果它只是一個常量，它不會重新運行useEffect.
uj5u.com熱心網友回復：
如果您在 useEffect 中使用 console.log("hello")，您會看到您只看到兩個控制臺顯示“hello”（因為 componentWillMount 和 componentDidMount）。這意味著，只有當狀態變數的值已更改或傳遞給它的道具發生更改時，您的組件才會重新渲染（當然傳遞的道具必須是狀態，否則它不會重新渲染）。
結論：只有組件中state或props值的變化才會重新渲染組件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/485897.html
標籤：javascript 反应 反应钩子 使用效果 使用状态