react Hook useMemo解决antV 图表重复刷新

最新推荐文章于 2023-12-04 08:00:00 发布

web Rookie

最新推荐文章于 2023-12-04 08:00:00 发布

阅读量659

点赞数 1

分类专栏：工作文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/cx18333/article/details/128698544

版权

工作专栏收录该内容

6 篇文章 0 订阅

订阅专栏

项目场景：

react 后台管理系统中首页用到Ant Design Charts图表,实现了多个图表

问题描述

当 useState更新时或者通过筛选框更新图表时,当前页面中所有的图表都进行重复的刷新

原因分析：

由于 useState数据更新,数据变化随之驱动页面更新,从而刷新

解决方案：

通过hookuseMemo对图表进行封装,等待指定参数更新时,页面在进行渲染

通过外部传入数据
通过useMemo对外部传入数据进行监听
当监听的数据变化时,useMemo在对页面进行渲染

import React, { useMemo } from 'react';
import { Pie } from '@ant-design/plots';

export default ({ data, toFixedNum = 0, }) => {
  const config = {
    appendPadding: 10,
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(toFixedNum)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    tooltip: {
      formatter: (datum) => {
        return { name: datum.type, value: datum.value + "人" };
      },
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };

  const component = useMemo(() => {
    return (
        <Pie data={data} {...config} />
    );
  }, [data]);

  return component;
};