Переглянути джерело

♻️ refactor(statistics): 移除残疾类型图表数据的 useMemo 缓存

- 删除 `disabilityChartData` 的 `useMemo` 缓存,将数据转换逻辑直接内联到渲染函数中
- 简化组件逻辑,避免不必要的性能优化开销
yourname 2 тижнів тому
батько
коміт
6b2f938c0e

+ 20 - 20
mini-ui-packages/yongren-statistics-ui/src/pages/Statistics/Statistics.tsx

@@ -115,12 +115,6 @@ const Statistics: React.FC<StatisticsProps> = () => {
     gcTime: 10 * 60 * 1000 // 缓存时间10分钟
   })
 
-  // 缓存残疾类型图表数据,避免每次渲染创建新对象
-  const disabilityChartData = useMemo(() => {
-    const stats = getStats(disabilityData)
-    return stats.length > 0 ? convertToColumnData(stats) : null
-  }, [disabilityData])
-
   // 获取性别分布数据
   const { data: genderData, isLoading: isLoadingGender } = useQuery({
     queryKey: ['statistics', 'gender-distribution'],
@@ -303,20 +297,26 @@ const Statistics: React.FC<StatisticsProps> = () => {
           <Text className="font-semibold text-gray-700">残疾类型分布 (Canvas 2D + 原始JS)</Text>
           {isLoadingDisability ? (
             <Text className="text-gray-500 text-center py-4">加载中...</Text>
-          ) : disabilityChartData ? (
-            <View className="mt-3">
-              <ColumnChartOriginal2D
-                canvasId="disability-type-chart-orig2d"
-                width={650}
-                height={300}
-                categories={disabilityChartData.categories}
-                series={disabilityChartData.series}
-                config={{ color: ['#3b82f6'] }}
-              />
-            </View>
-          ) : (
-            <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
-          )}
+          ) : (() => {
+            const stats = getStats(disabilityData)
+            if (stats.length > 0) {
+              const chartData = convertToColumnData(stats)
+              return (
+                <View className="mt-3">
+                  <ColumnChartOriginal2D
+                    canvasId="disability-type-chart-orig2d"
+                    width={650}
+                    height={300}
+                    categories={chartData.categories}
+                    series={chartData.series}
+                    config={{ color: ['#3b82f6'] }}
+                  />
+                </View>
+              )
+            } else {
+              return <Text className="text-gray-500 text-center py-4 mt-3">暂无数据</Text>
+            }
+          })()}
         </View>)}
 
         {/* 残疾类型分布 - Legacy版本(旧Canvas API + 原始JS) */}