关于react里使用Ant Design Charts统计图组件的多次渲染bug的解决方法

不怕麻烦的鹿丸

已于 2022-06-01 11:18:08 修改

阅读量2.3k

点赞数 5

分类专栏： React 文章标签： react.js javascript 前端

于 2022-06-01 11:06:26 首次发布

本文链接：https://blog.csdn.net/qq_31851435/article/details/125079899

版权

React 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在react项目里使用 Ant Design Charts 的统计图组件时，在同一个页面，每次在其他隔离组件里修改useState里不属于统计图组件的数据时，都会导致统计图组件重新渲染，这时候可以使用useMemo来解决这个多次渲染的问题，缓存统计图的渲染，仅当 data 值发生改变才会重新渲染。

import { Line } from '@ant-design/charts';

function Index(props) {
    const [dates, setDates] = useState([]);
    const [dayCountList, setDayCountList] = useState([]);

    const config1 ={
	    // data: dayCountList,
	    smooth: true,
        xField: 'date',
        yField: 'total',
        xAxis: {
          title: {
            text: '日期',
            position: 'end',
            autoRotate: true
          },
          // type: 'time',
          label: {
            // 数值格式化为千分位
            formatter: (v) => moment(v).format('YYYY-MM-DD')
          },
        }, 
        yAxis: {
          title: {
            text: '打开次数',
            position: 'end',
            autoRotate: true
          },
        }
    };

 
    const changeData = (num) => {
        setDates([num])
    })

    return <div>
        <Button type="primary" onClick={() => changeData(1)}>近7天</Button>
        {
            useMemo(() => <Line {...config} data={dayCountList}/>, [dayCountList])
        }
    </div>
}

原来不加useMemo的话，每次点击一次按钮触发changeDate都会导致Line组件重新渲染，现在加上useMemo之后，只有dayCountList变化的时候，才会重新渲染Line组件。