脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Hooks与setInterval

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

这种写法你会发现页面效果确实能出来，但是性能很差。每当 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次
}

现在我们的需求是在实现功能的基础上，还要使得定时器只监听一次,保障它的性能很高。

二、解决方案

1、函数式更新

useState 中的set方法可接收函数，该函数将接收先前的 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 对象在组件的整个生命周期内保持不变。

将定时器函数提取出来，每次定时器触发时，都能取到最新到 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)这样呢？为什么要通过一个函数返回？

//这个例子是错误的
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>;
}

定时器的第一个参数为 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();
 
  // 保存新回调
  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接收的参数是一样的,这就降低了我们的学习成本

  • 其次,useInterval的delay参数是可以动态调整的，而setInterval的delay参数是没有办法动态调整的

    • 当 useInterval Hook 接收到不同 delay，它会重设 interval。
    • 声明一个带有动态调整 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);
 
  // 增加计数器
  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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React中使用dnd-kit实现拖曳排序功能

    React中使用dnd-kit实现拖曳排序功能

    在这篇文章中,我将带着大家一起探究React中使用dnd-kit实现拖曳排序功能,由于前阵子需要在开发 Picals 的时候,需要实现一些拖动排序的功能,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • 详解React中错误边界的原理实现与应用

    详解React中错误边界的原理实现与应用

    在React中,错误边界是一种特殊的组件,用于捕获其子组件树中发生的JavaScript错误,并防止这些错误冒泡至更高层,导致整个应用崩溃,下面我们就来看看它的具体应用吧
    2024-03-03
  • ReactNative点击事件.bind(this)操作分析

    ReactNative点击事件.bind(this)操作分析

    这篇文章主要为大家介绍了ReactNative点击事件.bind(this)操作分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • React Ref Callback使用场景最佳实践详解

    React Ref Callback使用场景最佳实践详解

    这篇文章主要为大家介绍了React Ref Callback使用场景最佳实践详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 关于react中useCallback的用法

    关于react中useCallback的用法

    这篇文章主要介绍了关于react中useCallback的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • react路由守卫的实现(路由拦截)

    react路由守卫的实现(路由拦截)

    react不同于vue，通过在路由里设置meta元字符实现路由拦截。本文就详细的介绍一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • 详解React项目中碰到的IE问题

    详解React项目中碰到的IE问题

    这篇文章主要介绍了React项目中碰到的IE问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 基于React实现虚拟滚动的方案详解

    基于React实现虚拟滚动的方案详解

    这篇文章将以固定高度和非固定高度两种场景展开React中虚拟滚动的实现,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • React实现歌词滚动效果(跟随音乐播放时间滚动)

    React实现歌词滚动效果(跟随音乐播放时间滚动)

    这篇文章主要为大家详细介绍了React实现歌词滚动效果(跟随音乐播放使劲按滚动),文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2024-02-02
  • React模仿网易云音乐实现一个音乐项目详解流程

    React模仿网易云音乐实现一个音乐项目详解流程

    这篇文章主要介绍了React模仿网易云音乐实现一个音乐项目的详细流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论