我知道此代碼將起作用，并且該count值將在每 2 秒后更新一次：
import React from 'react';
function App() {
const [count, setCount] = React.useState(0);
React.useEffect(() => {
setInterval(() => {
setCount(prev => prev 1);
}, 2000);
}, []);
return <h1>{count}</h1>;
}
我試圖理解為什么下面的代碼不起作用：
React.useEffect(() => {
const interval = setInterval(() => {
setCount(count 1);
console.log('hello');
}, 2000);
return () => clearInterval(interval);
}, []);
在這種情況下，count保持在 1 但setInterval每 2 秒后呼叫一次，因為hello每 2 秒記錄一次。
setInterval未渲??染組件時如何呼叫？它是否在 React 生命周期之外運行？當我將回呼傳遞給 時
setCount(prev => prev 1)，它作業正常嗎？為什么？previn 回呼如何獲取更新的值？
我已經閱讀了類似的答案，但對我來說仍然沒有意義，所以如果有人可以消除疑問。
謝謝
uj5u.com熱心網友回復：
未呈現組件時如何呼叫 setInterval？它是否在 React 生命周期之外運行？
是的，setInterval 是一個函式，它是核心 javascript 語言的一部分。通過呼叫 setInterval，您要求瀏覽器每 2000 毫秒呼叫一次指定的函式。React 不參與其中。
當我將回呼傳遞給 setCount(prev => prev 1) 時，它作業正常嗎？為什么？回呼中的 prev 如何獲取更新的值？
該useState鉤的設計允許這種互動。React 承諾，如果你將一個函式傳入setCount，那么 react 將呼叫你的函式并傳入最新的值。
他們實作這一點的確切代碼可能很難逐步完成，因為他們重用了很多通用函式來實作幾個不同的鉤子，但是如果你想瀏覽他們的代碼庫，你可以在這里查看：https : //github.com /facebook/react/blob/main/packages/react-reconciler/src/ReactFiberHooks.new.js#L1525
uj5u.com熱心網友回復：
當您創建區間函式時，count將是創建時的值（因此為 0）。當它稍后被呼叫時，它仍將保留該值，因為它不會在該背景關系中發生更改。所以它總是將它設定為 0 1，所以 1。
當您傳遞回呼函式時，它將使用當前的正確值。
希望這可以解決問題！
uj5u.com熱心網友回復：
此版本：setCount(prev => prev 1)每次間隔運行時都使用先前的狀態值。
此版本：在運行時setCount(count 1)使用（在本例中為 0，因此為 0 1）。因為有一個空的依賴陣列，這個鉤子只運行一次。countuseEffect
如果 count 包含在的依賴項陣列中，useEffect那么它會在值count更改時重新運行。
運行它可能有助于了解發生了什么：
React.useEffect(() => {
console.log('running useEffect')
const interval = setInterval(() => {
setCount(count 1);
console.log('hello ', count);
}, 500);
return () => {
console.log('clear interval')
clearInterval(interval);
}
}, [count]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/378022.html
標籤：javascript 反应 反应钩子 设置间隔