React Hooks與setInterval的踩坑問題小結

更新時間：2022年04月27日 14:35:19 作者：田先森

本文主要介紹了React Hooks與setInterval的踩坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、需求

我們希望有一個每一秒自動+1的定時器

function Counter() {
  let [count, setCount] = useState(0);
  useEffect(() => {
    let id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [count]);
  return <h1>{count}</h1>;
}

這種寫法你會發(fā)現(xiàn)頁面效果確實能出來，但是性能很差。每當 count 更改了， useEffect 就會渲染一次,定時器也會不停的被新增與移除。過程如下：

//第一次
function Counter() {
//... 
useEffect(() => {
    let id = setInterval(() => {
      setCount(0 + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [0]);
//...
}
//第二次
function Counter() {
//... 
useEffect(() => {
    let id = setInterval(() => {
      setCount(1 + 1);
    }, 1000);
    return () => clearInterval(id);
  }, [1]);
//...
//第N次
}

現(xiàn)在我們的需求是在實現(xiàn)功能的基礎上，還要使得定時器只監(jiān)聽一次,保障它的性能很高。

二、解決方案

1、函數(shù)式更新

useState 中的set方法可接收函數(shù)，該函數(shù)將接收先前的 state ，并返回一個更新后的值。這樣定時器每次拿到的是最新的值。

function Counter() {
let [count, setCount] = useState(0);
useEffect(() => {
    let id = setInterval(() => {
      setCount(v => {
        return v + 1;
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);
return <h1>{count}</h1>;
}

2、使用useRef

useRef 返回一個可變的 ref 對象,返回的 ref 對象在組件的整個生命周期內(nèi)保持不變。

將定時器函數(shù)提取出來，每次定時器觸發(fā)時，都能取到最新到 count .

function Counter() {
  let [count, setCount] = useState(0);
  const myRef = useRef(null);
  myRef.current = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    let id = setInterval(() => {
      myRef.current();
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return <h1>{count}</h1>;
}

思考：為什么不直接像下面這個例子,將setInterval寫成 setInterval(myRef.current, 1000)這樣呢？為什么要通過一個函數(shù)返回？

//這個例子是錯誤的
function Counter() {
  let [count, setCount] = useState(0);
  const myRef = useRef(null);
  myRef.current = () => {
    setCount(count + 1);
  };
  useEffect(() => {
    let id = setInterval(myRef.current, 1000);
    return () => clearInterval(id);
  }, []);
 return <h1>{count}</h1>;
}

定時器的第一個參數(shù)為 interval 變量，如果直接將myRef.current直接賦值給 interval 變量，那么之后的myRef.current的值改變之后，在這里依舊取到的是改變之前的值，因為ref的改變不會引起組件的重新渲染。

3、用useReducer

將 count 變量存入 reducer 中，使用 useReducer 更新 count

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return state + 1;
    default:
      throw new Error();
  }
}
?
function Counter() {
  const [state, dispatch] = useReducer(reducer, 0);
  useEffect(() => {
    setInterval(() => {
      dispatch({ type: "increment" });
    }, 1000);
  }, []);
  return <h1>{state}</h1>;
}

4、自定義的hooks

自定義hook：useInterval

import React, { useState, useEffect, useRef } from 'react';
 
function useInterval(callback, delay) {
  const savedCallback = useRef();
 
  // 保存新回調(diào)
  useEffect(() => {
    savedCallback.current = callback;
  });
 
  // 建立 interval
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

使用useInterval：

function Counter() {
  let [count, setCount] = useState(0);
 
  useInterval(() => {
    // 你自己的代碼
    setCount(count + 1);
  }, 1000);
 
  return <h1>{count}</h1>;
}

useInterval這個api的設計是非常巧妙的。

首先useInterval和setInterval接收的參數(shù)是一樣的,這就降低了我們的學習成本
其次,useInterval的delay參數(shù)是可以動態(tài)調(diào)整的，而setInterval的delay參數(shù)是沒有辦法動態(tài)調(diào)整的
- 當 useInterval Hook 接收到不同 delay，它會重設 interval。
- 聲明一個帶有動態(tài)調(diào)整 delay 的 interval，來替代寫添加和清除* interval 的代碼 —— useInterval Hook 幫我們做到了**。
- 如果想要暫時暫停 interval ，那么可以像下面這個例子一樣

  const [delay, setDelay] = useState(1000);
  const [isRunning, setIsRunning] = useState(true);
 
  useInterval(() => {
    setCount(count + 1);
  }, isRunning ? delay : null);

useInterval的delay也可以受控于另外一個useInterval

function Counter() {
  const [delay, setDelay] = useState(1000);
  const [count, setCount] = useState(0);
 
  // 增加計數(shù)器
  useInterval(() => {
    setCount(count + 1);
  }, delay);
 
  // 每秒加速
  useInterval(() => {
    if (delay > 10) {
      setDelay(delay / 2);
    }
  }, 1000);
 
  function handleReset() {
    setDelay(1000);
  }
 
  return (
    <>
      <h1>Counter: {count}</h1>
      <h4>Delay: {delay}</h4>
      <button onClick={handleReset}>
        Reset delay
      </button>
    </>
  );
}

到此這篇關于React Hooks與setInterval的踩坑問題小結的文章就介紹到這了,更多相關React Hooks與setInterval內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

React中使用dnd-kit實現(xiàn)拖曳排序功能
在這篇文章中,我將帶著大家一起探究React中使用dnd-kit實現(xiàn)拖曳排序功能,由于前陣子需要在開發(fā) Picals 的時候,需要實現(xiàn)一些拖動排序的功能,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下
2024-06-06
詳解React中錯誤邊界的原理實現(xiàn)與應用
在React中,錯誤邊界是一種特殊的組件,用于捕獲其子組件樹中發(fā)生的JavaScript錯誤,并防止這些錯誤冒泡至更高層,導致整個應用崩潰,下面我們就來看看它的具體應用吧
2024-03-03
ReactNative點擊事件.bind(this)操作分析
這篇文章主要為大家介紹了ReactNative點擊事件.bind(this)操作分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
React Ref Callback使用場景最佳實踐詳解
這篇文章主要為大家介紹了React Ref Callback使用場景最佳實踐詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
關于react中useCallback的用法
這篇文章主要介紹了關于react中useCallback的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
react路由守衛(wèi)的實現(xiàn)(路由攔截)
react不同于vue，通過在路由里設置meta元字符實現(xiàn)路由攔截。本文就詳細的介紹一下，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
詳解React項目中碰到的IE問題
這篇文章主要介紹了React項目中碰到的IE問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
基于React實現(xiàn)虛擬滾動的方案詳解
這篇文章將以固定高度和非固定高度兩種場景展開React中虛擬滾動的實現(xiàn),文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
2025-03-03
React實現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細介紹了React實現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
2024-02-02
React模仿網(wǎng)易云音樂實現(xiàn)一個音樂項目詳解流程
這篇文章主要介紹了React模仿網(wǎng)易云音樂實現(xiàn)一個音樂項目的詳細流程，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-08-08