浅谈什么时候要用useMemo，举个🌰

这次的例子是拿我实际开发需求来说

左边我使用了一个echarts图表，但是我需要修改右侧的数据，重绘左侧图表，这个时候我考虑了useMemo，因为页面里不止一个图表，但是数据是封装在一起的。下面我简单说明一下useMemo

思考：在React函数式组件里，我们要想实现这样的数据联动肯定是离不开useEffect的，但是不想引起页面整体的渲染，是否可以考虑采用useMemo来做数据缓存，只渲染更改的部分

什么是 useMemo？

useMemo 是 React 中的一个 Hook，它可以用来缓存计算结果，并在后续的渲染中重复利用这些计算结果。useMemo 接收两个参数：一个函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，useMemo 会重新执行传入的函数，并返回新的计算结果

为什么需要 useMemo？

在 React 应用中，渲染组件是一个非常消耗资源的操作。如果在每次渲染时都进行一些昂贵的计算，就会导致应用的性能下降。为了避免这种情况，我们可以使用 useMemo 来缓存计算结果。这样，在后续的渲染中，只要依赖数组不发生变化，就可以直接使用缓存的计算结果，从而提高了组件的渲染性能。

右侧是的数据我采用了Dva的仓库更新的形式，以下统一为detailInfoJSON

 let ChartDomData = useMemo(() => {
 
   //这里全是数据的操作，你想把数据处理成图表相应的格式
   
  }, [detailInfoJSON?.chatData]); //这里我传入的第二参数其实是detailInfoJSON下的chatData这个参数

然后就是在useEffect里监听处理

useEffect(() => {
//页面中去创建一个div id位main的元素
    let myChart = echarts.init(document.getElementById('main'));
    // 绘制图表
    myChart.setOption({
      title: {
        text: '高发事件分布区县',
        left: 'center',
        top: 10,
        textStyle: {
          color: 'rgb(140, 138, 138)',
        },
      },
      legend: {
        bottom: '0%',
        data: ChartDomData?.labelList,
        selectedMode: false,
      },
      tooltip: {
        trigger: 'axis',

        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效

          type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      xAxis: {
        type: 'category',
        data: ChartDomData?.xAxisName,
        axisLabel: {
          interval: 0,
          rotate: 60,
        },
      },

      yAxis: {
        type: 'value',
      },
      series: ChartDomData?.seriesData,
    });
  }, [ChartDomData]); //这里只要监听ChartDomData的变化就可以了

除去useMemo外还有useCallback，本篇就先不做介绍了。 这就是我使用useMemo的场景，如果有误的可以留言指正错误。