React?Hooks與setInterval的坑怎么解決

這篇文章主要講解了“React Hooks與setInterval的坑怎么解決”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React Hooks與setInterval的坑怎么解決”吧！

一、需求

我們希望有一個(gè)每一秒自動(dòng)+1的定時(shí)器

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

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

//第一次
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)在我們的需求是在實(shí)現(xiàn)功能的基礎(chǔ)上，還要使得定時(shí)器只監(jiān)聽一次,保障它的性能很高。

二、解決方案

1、函數(shù)式更新

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

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

2、使用useRef

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

將定時(shí)器函數(shù)提取出來，每次定時(shí)器觸發(fā)時(shí)，都能取到最新到 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 <h2>{count}</h2>;
}

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

//這個(gè)例子是錯(cuò)誤的
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 <h2>{count}</h2>;
}

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

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 <h2>{state}</h2>;
}

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 <h2>{count}</h2>;
}

useInterval這個(gè)api的設(shè)計(jì)是非常巧妙的。

• 首先useInterval和setInterval接收的參數(shù)是一樣的,這就降低了我們的學(xué)習(xí)成本

• 其次,useInterval的delay參數(shù)是可以動(dòng)態(tài)調(diào)整的，而setInterval的delay參數(shù)是沒有辦法動(dòng)態(tài)調(diào)整的

• 當(dāng) useInterval Hook 接收到不同 delay，它會(huì)重設(shè) interval。

• 聲明一個(gè)帶有動(dòng)態(tài)調(diào)整 delay 的 interval，來替代寫 添加和清除* interval 的代碼 —— useInterval Hook 幫我們做到了**。

• 如果想要暫時(shí)暫停 interval ，那么可以像下面這個(gè)例子一樣

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

• useInterval的delay也可以受控于另外一個(gè)useInterval

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

感謝各位的閱讀，以上就是“React Hooks與setInterval的坑怎么解決”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對React Hooks與setInterval的坑怎么解決這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！