ReactJS开发中如何避免图表组件发生不必要的重渲染？

核心原因是当前组件state更新触发全量重渲染时，内部的图表部分没有做渲染阻断，以下是可落地的几种方案，按推荐优先级排序：

• 方案1：抽离图表为独立子组件，用React.memo做浅比较阻断
  这是最符合React设计规范的方案，React.memo会默认对传入子组件的props做浅比较，仅当props真实发生变化时才触发子组件重渲染。
  示例代码：

  // 独立的图表子组件
  const CustomChart = React.memo(({ chartData, chartConfig }) => {
    // 内部图表初始化、渲染逻辑，比如ECharts/Chart.js的实例化逻辑
    const chartRef = useRef(null);
    useEffect(() => {
      // 初始化图表、更新图表的逻辑
    }, [chartData, chartConfig]);
    return <div ref={chartRef} style={{ width: '100%', height: 400 }} />;
  });
  
  // 父组件代码
  function PageComponent() {
    const [formValue, setFormValue] = useState(''); // 和图表无关的状态
    const [chartData, setChartData] = useState([]); // 仅该状态变化时需要更新图表
  
    // 稳定引用：避免每次渲染生成新的对象导致memo失效
    const stableChartConfig = useMemo(() => ({
      xAxis: { type: 'category' },
      yAxis: { type: 'value' }
    }), []);
  
    return (
      <div>
        <input 
          value={formValue} 
          onChange={e => setFormValue(e.target.value)} 
          placeholder="修改这里不会触发图表重渲染"
        />
        <CustomChart chartData={chartData} chartConfig={stableChartConfig} />
      </div>
    );
  }
  

  注意：如果传给图表组件的props包含引用类型（对象、数组、函数），需要用useMemo、useCallback稳定引用，否则每次父组件重渲染都会生成新的引用，导致React.memo的浅比较失效。

• 方案2：无需抽离子组件，用useMemo缓存图表渲染结果
  如果不想拆分组件，可以直接在当前组件内用useMemo缓存图表节点，仅当图表相关的依赖项变化时才重新生成图表部分的DOM。
  示例代码：

  function PageComponent() {
    const [formValue, setFormValue] = useState('');
    const [chartData, setChartData] = useState([]);
    const chartRef = useRef(null);
  
    // 仅当chartData变化时才重新渲染图表部分
    const cachedChart = useMemo(() => {
      useEffect(() => {
        // 图表初始化、更新逻辑
      }, [chartData]);
      return <div ref={chartRef} style={{ width: '100%', height: 400 }} />;
    }, [chartData]);
  
    return (
      <div>
        <input 
          value={formValue} 
          onChange={e => setFormValue(e.target.value)} 
        />
        {cachedChart}
      </div>
    );
  }
  

• 方案3：拆分无关状态到子组件，避免父组件触发重渲染
  如果当前组件的大部分状态都和图表无关，可以把无关的业务逻辑（比如表单、操作按钮）拆分为独立的子组件，子组件内部的state变化不会触发父组件重渲染，自然不会连带图表更新。

常见避坑点 #

• 不要通过重写shouldComponentUpdate或者在渲染函数里加判断逻辑强制阻断渲染，容易导致组件状态和DOM不同步的问题
• 如果使用第三方封装的React图表组件，可优先查看官方配置是否提供updateTrigger、shouldUpdate之类的配置项，直接配置仅在数据变化时更新即可
• 当React.memo默认浅比较不满足需求时，可以传入第二个参数自定义比较逻辑，自行判断props变化是否需要触发重渲染

内容的提问来源于stack exchange，提问作者TheDarkHunter