react?hooks頁面實時刷新方式(setInterval)

更新時間：2024年03月12日 15:30:57 作者：一車雞蛋

這篇文章主要介紹了react?hooks頁面實時刷新方式(setInterval),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

1. 實現(xiàn)

頁面實時刷新一般用定時器（setInterval（））實現(xiàn)。

定時器：setInterval() - 每多少秒執(zhí)行一次指定的代碼。（執(zhí)行多次）
延時器：setTimeout() - 多少秒以后執(zhí)行指定代碼。（執(zhí)行1次）

定時器與延時器均為異步程序，放在異步隊列里執(zhí)行！

2. 注意點

1. 頁面使用定時器一定要記得清除。
2. useEffect 的數(shù)組依賴不要忘記，不然只執(zhí)行一次。
3. 也可以使用useRef（為了避免setInterval變量形成閉包）

方式一：使用數(shù)組依賴

function Index() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const timer = setInterval(() => {
    
    //可以調(diào)接口
    //可以存state，如setCount(count + 1)
    //可以調(diào)其他函數(shù)
 
    }, 1000);
    return () => clearInterval(timer);  //清除定時器不要忘記
  }, [count]);  //數(shù)組依賴不要忘記
 
  return <div>{count}</div>;
}

方式二：使用useRef

function Index() {
  const savecallback=useRef(null); //為了避免形成閉包
  function callback(){
    // 可以調(diào)其他函數(shù)
    // 可以調(diào)接口
  }
 
  /*每當組件被重新渲染，useEffect 都會將最新的回調(diào)函數(shù)賦值給 ref.current，接著 ref.current會被放到 setInterval 里去執(zhí)行。所以 setInterval 雖只在組件初始化時被啟動了一次，但它在執(zhí)行每次定時任務時，使用的都是最新的回調(diào)函數(shù)?；卣{(diào)函數(shù)不再被困于閉包當中，最新的 state、props 自然能夠被取到。*/
  
  useEffect(() => {
    (savecallback as any).current = callback;
  });
 
  useEffect(() => {
    const timer = setInterval(() => {
      (savecallback as any).current();
    }, 1000);
    return () => clearInterval(timer);
  }, []);
 
  return <div>頁面</div>;
}

方式三：使用useReducer 狀態(tài)管理

（對于定時更新某個變量更友好，定時調(diào)接口的話還是上邊兩種更方便一點）

const intitstate= {count: 0};
 
function reducer(state = 0，action) {
  return {count: state.count + 1};
}
 
export default function Index() {
  const [state, dispatch] = useReducer(reducer,intitstate);
 
  useEffect(() => {
    setInterval(() => {
      dispatch();
    }, 1000);
  }, []);
 
  return <div>{state.count}</div>;
}

因為閉包的原因，回調(diào)函數(shù)無法取到最新的 state，而大多數(shù)場景下我們更新 state 前又必須先獲取 state 的當前值。

那如何才能夠在不讀取最新 state 的前提下，對 state 進行增量更新，可以用useReducer 狀態(tài)管理。