如何在React中优雅的使用Interval(轮询)

更新日期: 2022-05-13阅读: 1.6k标签: React

前端开发中,经常会使用轮询(setInterval),比如后端异步数据处理,需要定时查询最新状态。但是在用 react Hook 进行轮询操作时,可能会发现 setInterval 没有那么轻松驾驭,今天笔者就来谈谈在项目开发中是如何解决setInterval调用问题的,以及如何更加优雅的使用 setInterval 。

问题的引入

先从一个简单的例子开始,为了便于叙述,本文中的案例用一个计数定时器来演示。

import React, { useEffect, useState } from "react";

export default function IntervalExp() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  return (
    <div>
      <p>当前计数:{count}</p>
    </div>
  );
}

首先使用useState定义了一个 count 变量,然后在useEffect中,定义了一个名为 timer 的定时器,并在定时器中执行count+1操作,并在组件卸载时清除定时器。

理想状态下,count会执行+1操作,并不断的递增。但实际并非如此,count在变为1以后,将不再有任何变化。原因很简单,useEffect中由于没有将依赖的count对象添加到依赖对象数组中,所以它每次拿到的都是老的count对象,也就是0。

方法一:添加依赖数组

import React, { useEffect, useState } from "react";

export default function IntervalExp() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    console.log("更新了", timer);
    return () => clearInterval(timer);
  }, [count]);
  return (
    <div>
      <p>当前计数{count}</p>
    </div>
  );
}

当把count对象加入到依赖数组以后,可以发现定时器现在可以正常工作了。但是注意这里有个坑,在return的时候,即组件卸载的时候,一定要做清理操作,否则你的定时器会执行的越来越快,因为新的定时器会不断生成,但老的定时器却没有 清理 。

但是这种方式完美吗?并不然,如果定时器操作的数据包含父组件传递的props,或者是其他的state,都需要加到依赖数组中,这样做不仅不美观,而且容易出错。同时,这种方式还有个问题,就是定时器要在每次变化时要 重新生成 ,这必然也会有很高的 性能损耗 。

方法二:不添加依赖数组的方式(useRef)

useRef是官方的hook,使用useRef定义的对象有个current对象,是可以存储数据的,而且存储的数据可以被修改,并在组件的每一次渲染中,都能从current中拿到最新的数据。基于ref的这一特性,实现一个名为useInterval的自定义hook。

import { useEffect, useRef } from "react";

export const useInterval = (cb: Function, time = 1000) => {
  const cbRef = useRef<Function>();
  useEffect(() => {
    cbRef.current = cb;
  });
  useEffect(() => {
    const callback = () => {
      cbRef.current?.();
    };
    const timer = setInterval(() => {
      callback();
    }, time);
    return () => clearInterval(timer);
  }, []);
};

在这个自定义hook中,有回调函数和轮询时间两个参数。使用useEffect把最新的回调函数赋值给ref.current,这样在第二个useEffect中就能从ref.current上拿到最新的callback,然后在定时器中执行它。

在项目中如何使用呢?

useInterval(() => {
    setCount(count + 1);
  }, 1000);

只需引入自定义hook,并按照上面的格式调用即可。

方法三:更高级的办法(useReducer)☆☆☆

回头看第一个例子,为什么在useEffect中不添加count就无法实现想要的定时器效果呢,说白了是因为读取了state的数据,而又因为闭包原因拿不到最新的count数据,所以导致interval操作失败。其实借助useReducer就可以在不读取count的情况更新count数据。

import React, { useEffect, useReducer } from "react";

function reducer(state: { count: number }) {
  return { count: state.count + 1 };
}
export default function IntervalExp() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  useEffect(() => {
    setInterval(() => {
      dispatch();
    }, 1000);
  }, []);

  return (
    <div>
      <p>当前计数{state.count}</p>
    </div>
  );
}

在这个案例中,使用useReducer定义了一个简单的count操作方法,在interval中,通过调用dispatch方法,成功更新了count数据。useReducer在需要操作多个state的复杂业务逻辑场景下可以使用,虽然定义起来麻烦,但是可以实现将组件中的业务逻辑抽离出来,写出更加易于维护的代码,而且在目前这个场景中,useReducer比上面两个方式处理的更加优雅,也是本文推荐的方式。

总结

hook是React中非常有魅力的一个发明,灵活使用hook可以写出更有品质的代码。作者写本文的目的也是因为在实际开发中遇到了这一问题,因此希望本文可以帮助到其他开发者。

来源:https://segmentfault.com/a/1190000041831958

链接: https://www.fly63.com/article/detial/11499

如何优雅的设计 React 组件

如今的 Web 前端已被 React、Vue 和 Angular 三分天下,尽管现在的 jQuery 已不再那么流行,但 jQuery 的设计思想还是非常值得致敬和学习的,特别是 jQuery 的插件化。

React深度编程:受控组件与非受控组件

受控组件与非受控组件在官网与国内网上的资料都不多,有些人觉得它可有可不有,也不在意。这恰恰显示React的威力,满足不同规模大小的工程需求。

React框架学习_关于React两种构建应用方式选择

一般在传统模式下,我们构建前端项目很简单。就是下载各种js文件,如JQuery、Echart等,直接放置在html静态文件。Webpack则是JavaScript中比较知名的打包工具。这两个构建工具构成了React应用快速搭建的基础。

Gatsby.js_一款基于React.js静态站点生成工具

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。

React创建组件的三种方式及其区别

React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归;具体的三种方式:函数式定义的无状态组件、es5原生方式React.createClass定义的组件、es6形式的extends React.Component定义的组件

react生命周期详解_深入理解React生命周期

React主要思想是通过构建可复用组件来构建用户界面,每个组件都有自己的生命周期,它规定了组件的状态和方法需要在哪个阶段改变和执行。所谓组件就是有限状态机,,表示有限个状态以及在这些状态之间的转移和动作行为的模型。

React + Webpack 构建打包优化

React 相关的优化:使用 babel-react-optimize 对 React 代码进行优化,检查没有使用的库,去除 import 引用,按需打包所用的类库,比如 lodash 、echarts 等.Webpack 构建打包存在的问题两个方面:构建速度慢,打包后的文件体积过大

react router中页面传值的三种方法

这篇文章主要介绍React Router定义路由之后如何传值,有关React和React Router 。react router中页面传值的三种方法:props.params、query、state

react 高阶组件的 理解和应用

react 高阶组件简单的理解是:一个包装了另一个基础组件的组件。高阶组件的两种形式:属性代理(Props Proxy)、反向继承 (Inheritance Inversion)

react中的refs属性的使用方法

React 支持一种非常特殊的属性 Ref ,你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例( backing instance )。这样就可以确保在任何时间总是拿到正确的实例

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!