React中如何高效缓存路径可视化矩阵？

核心思路：避免全量重建矩阵，只修改局部节点 #

卡顿的根源是每次状态变化都重新生成整个矩阵，导致React需要重新渲染所有节点。正确的做法是缓存基础静态矩阵，动态派生当前状态矩阵，仅修改变化的部分。

1. 缓存不可变的基础矩阵 #

用useMemo缓存初始空矩阵（或后续的迷宫矩阵），仅在行列数变化时重新生成，避免不必要的重复计算：

import { useMemo, useState } from 'react';

const PathFinder = ({ rows = 20, cols = 50 }) => {
  // 缓存基础矩阵：仅行列数变化时重建
  const baseMatrix = useMemo(() => {
    return Array(rows).fill().map((_, row) => 
      Array(cols).fill().map((_, col) => ({
        row,
        col,
        type: 'empty', // 可选值：empty/wall/start/end
        visited: false,
        distance: Infinity,
        isPath: false
      }))
    );
  }, [rows, cols]);

2. 维护动态状态，派生当前矩阵 #

用useState管理起点、终点、墙体的坐标，再通过useMemo基于基础矩阵局部修改生成当前矩阵，而非全量重建：

const [startPos, setStartPos] = useState({ row: 0, col: 0 });
  const [endPos, setEndPos] = useState({ row: rows - 1, col: cols - 1 });
  const [walls, setWalls] = useState(new Set()); // 存储墙体坐标，格式如"row-col"

  // 派生当前矩阵：仅依赖项变化时才更新
  const currentMatrix = useMemo(() => {
    // 深拷贝基础矩阵到节点层级（避免修改原基础矩阵）
    const matrix = baseMatrix.map(row => row.map(node => ({ ...node })));

    // 更新起点
    matrix[startPos.row][startPos.col].type = 'start';
    // 更新终点
    matrix[endPos.row][endPos.col].type = 'end';
    // 更新墙体
    walls.forEach(key => {
      const [row, col] = key.split('-').map(Number);
      matrix[row][col].type = 'wall';
    });

    return matrix;
  }, [baseMatrix, startPos, endPos, walls]);

3. 实现拖拽实时更新 #

拖拽起点/终点时，只需更新对应的坐标状态，currentMatrix会自动派生新的矩阵。由于仅修改局部节点，计算量极小，不会出现卡顿：

const handleDragEnd = (targetPos, nodeType) => {
    if (nodeType === 'start') {
      setStartPos(targetPos);
    } else if (nodeType === 'end') {
      setEndPos(targetPos);
    }
  };

  // 节点组件示例
  const Node = ({ node }) => (
    <div
      className={`node ${node.type}`}
      draggable={node.type === 'start' || node.type === 'end'}
      onDragEnd={() => handleDragEnd({ row: node.row, col: node.col }, node.type)}
      // 补充onDragOver、onDrop等拖拽事件逻辑
    />
  );

后续功能适配 #

• 墙体管理：添加/移除墙体时，只需更新walls集合（比如点击节点时切换坐标在集合中的存在状态），currentMatrix会自动同步，无需重建整个矩阵。
• 迷宫生成：生成迷宫时，直接生成墙体坐标集合替换walls，或重新生成baseMatrix为带迷宫墙体的矩阵（如需清空所有动态状态），配合useMemo的依赖项控制重建时机。

之前缓存失败的常见原因 #

• 未对基础矩阵做深拷贝，导致修改当前矩阵时污染了缓存的基础矩阵；
• useMemo的依赖项设置错误，比如加入了startPos/endPos，导致基础矩阵频繁重建；
• 直接修改状态中的矩阵对象，未返回新引用，React无法检测到变化。

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