React中百万级数据点存储与高性能全量渲染方案咨询

存储层面：用Ref替代State存储原始数据 #

• 百万级数据存在React State里会触发组件反复重渲染，因为State更新会强制组件重新执行render逻辑。改用useRef存储原始数据，Ref的更新不会触发组件重渲染，仅在组件挂载时初始化，后续直接通过dataRef.current访问数据即可。
• 示例代码：

  import { useRef, useEffect } from 'react';
  
  function ChartComponent() {
    const dataRef = useRef([]);
  
    useEffect(() => {
      // 调用第三方API
      fetch('/api/large-data')
        .then(res => res.json())
        .then(data => {
          // 直接存到Ref，不触发重渲染
          dataRef.current = data;
          // 触发图表渲染逻辑（比如Canvas绘制）
          renderChart(dataRef.current);
        });
    }, []);
  
    // ... 其他逻辑
  }
  

渲染层面：用Canvas/WebGL替代DOM渲染 #

• 一次性渲染百万个DOM元素必然导致严重性能问题，改用Canvas或WebGL直接绘制像素级图表是核心解决方案。成熟的图表库（如ECharts、Chart.js）默认支持Canvas渲染模式，能高效处理百万级数据点的绘制。
• 核心思路：将Ref中存储的原始数据传递给图表库，由库底层通过Canvas完成批量绘制，避免创建大量DOM节点占用内存和触发重排重绘。

辅助优化：提前预处理数据 #

• 在将数据存入Ref前，提前将其转换为渲染所需的格式（比如Canvas绘制需要的坐标数组），避免每次渲染时重复计算。例如：

  dataRef.current = rawData.map(item => [item.timestamp, item.price]);
  

• 这种预处理只需要执行一次，后续渲染直接使用转换后的格式，减少实时计算开销。

避免无关重渲染 #

• 用React.memo包裹图表组件，防止父组件无关State更新导致图表组件重复渲染；同时用useCallback、useMemo处理图表相关的回调和计算值，确保只有数据真正变化时才触发渲染逻辑。

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