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

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

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

1. 實(shí)現(xiàn)

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

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

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

2. 注意點(diǎn)

1. 頁面使用定時(shí)器一定要記得清除。
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);  //清除定時(shí)器不要忘記
  }, [count]);  //數(shù)組依賴不要忘記
 
  return <div>{count}</div>;
}

方式二：使用useRef

function Index() {
  const savecallback=useRef(null); //為了避免形成閉包
  function callback(){
    // 可以調(diào)其他函數(shù)
    // 可以調(diào)接口
  }
 
  /*每當(dāng)組件被重新渲染，useEffect 都會(huì)將最新的回調(diào)函數(shù)賦值給 ref.current，接著 ref.current會(huì)被放到 setInterval 里去執(zhí)行。所以 setInterval 雖只在組件初始化時(shí)被啟動(dòng)了一次，但它在執(zhí)行每次定時(shí)任務(wù)時(shí)，使用的都是最新的回調(diào)函數(shù)。回調(diào)函數(shù)不再被困于閉包當(dāng)中，最新的 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)管理

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

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>;
}

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

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