React Hooks使用Deck.gl时如何获取热力图层权重的最小最大值

你的推测是对的，不要在getWeight这类Deck.gl图层访问器里做状态更新操作，正确做法就是在渲染<DeckGL/>前提前遍历数据算出权重极值。

• Deck.gl的图层属性访问器不会按普通JS函数的逻辑在主线程执行：框架会把访问器函数序列化后编译为WebGL着色器在GPU端运行，你写在getWeight里的setMax、setMin调用根本不会被执行，自然触发不了React状态更新。
• 即便访问器回退到JS端执行，渲染过程中调用state setter会直接触发组件重渲染，重渲染又会重建图层、重新执行访问器，造成无限重渲染的死循环。

用useMemo缓存权重计算和极值统计逻辑，只有当原始数据、时间范围等依赖项变化时才重新遍历计算，既不会重复消耗性能，也能拿到准确的权重最小值、最大值直接用于界面展示，计算完成后再生成图层配置即可。

参考实现代码：

import { useMemo } from 'react';
import DeckGL from '@deck.gl/react';
import { HeatmapLayer } from '@deck.gl/aggregation-layers';

function RainHeatmap({ rawData, timeStart, timeEnd }) {
  // 提前计算所有权重和对应极值，依赖变化时自动重算
  const { dataset, weightMin, weightMax } = useMemo(() => {
    let minVal = Infinity;
    let maxVal = -Infinity;
    // 遍历全量数据预计算权重
    const processedData = rawData.map(point => {
      const weight = Number(
        sumValuesBetween(point.rainByHour, timeStart, timeEnd).toFixed(2)
      );
      if (weight < minVal) minVal = weight;
      if (weight > maxVal) maxVal = weight;
      return {
        ...point,
        weight
      };
    });

    return {
      dataset: processedData,
      weightMin: minVal,
      weightMax: maxVal
    };
  }, [rawData, timeStart, timeEnd]);

  // 生成热力图层
  const layers = [
    new HeatmapLayer({
      id: 'rainfall-heatmap',
      data: dataset,
      getPosition: d => [d.longitude, d.latitude],
      getWeight: d => d.weight, // 直接读取预计算好的权重，不在访问器里做复杂逻辑
      weightDomain: [weightMin, weightMax] // 直接把极值传给图层，避免图层重复计算
    })
  ];

  return (
    <div>
      {/* 直接展示极值即可，不需要额外存状态 */}
      <div className="range-label">
        降雨量权重范围：{weightMin.toFixed(2)} ~ {weightMax.toFixed(2)}
      </div>
      <DeckGL
        // 这里填你自己的DeckGL配置，比如初始视角、控制器参数等
        layers={layers}
      />
    </div>
  );
}

• 预遍历数据不会带来额外性能负担：Deck.gl渲染图层时本身就要遍历全量数据读取权重值，预计算只是把这步逻辑前置，配合useMemo缓存后，无关状态触发的重渲染不会重复执行计算。
• 所有Deck.gl的图层访问器（包括getPosition/getColor/getWeight等）都不要写副作用逻辑（比如改状态、发请求、操作DOM），这类函数要么被编译为GPU代码不执行JS逻辑，要么会在图层更新时被高频调用，很容易引发不可预期的bug或性能问题。

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