react中 echart数据定时刷新

最新推荐文章于 2023-12-08 16:09:41 发布

嚣张.miner

最新推荐文章于 2023-12-08 16:09:41 发布

阅读量4.7k

点赞数

分类专栏： react 文章标签： react echart 重新刷新数据 setInterval

本文链接：https://blog.csdn.net/zm_miner/article/details/89510037

版权

本文探讨了如何在React应用中实现ECharts图表的数据定时刷新，而非整个页面的刷新。通过设置`setInterval`，可以实现在不刷新页面的情况下，仅更新数据。对于单个请求，直接在定时器内处理请求即可。而当有多个请求时，特别是子组件中包含ECharts请求，为了避免代码冗余，推荐将定时器放在父组件中，利用React的钩子函数来定时更新状态值，从而触发页面重新渲染。

摘要由CSDN通过智能技术生成

处理react页面刷新问题, 只是数据定时刷新, 而不是当前页面刷新,类似F5刷新页面
在react中, state和props数据更新, 就会重新render

单个请求

如果当前页面只有一个请求那么可以把当前请求放在定时器setInterval中就可以实现当前页数据的定时刷新

多个请求

如果子组件中是echart的请求, 父组件引用众多子组件, 那么此时的定时器应该放在哪里?

放在子组件的话, 当然很简单, 只需要把请求塞到定时器中, 当时代码冗余度太好, 还麻烦
放在父组件中, 我们只需要使用this.setState(), 页面就会刷新, react钩子中写一个定时器, 定时执行, 修改state的值

eg:

在这里插入图片描述
同理: 当当前浏览器窗口大小改变,需要重新渲染页面时, 也是这样

import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import injectSheet from 'react-jss';
import GetData from './comps/getData/index.js';
import DataExchange from