React中SVG多边形组件定义在函数外不更新的问题及解决

问题原因分析 #

你遇到的这个问题核心在于React的组件识别逻辑和props引用比较机制：

1. 当Polygon1定义在Polygons内部时：
   每次Polygons组件因state更新重新渲染时，Polygon1都会被重新创建为一个全新的函数（组件类型）。React会将其识别为和之前完全不同的组件，因此会卸载旧的Polygon1实例并挂载新的——这就强制触发了重新渲染，哪怕points的引用没有变化，最终SVG的多边形也能正常更新。

2. 当Polygon1定义在外部时：
   Polygon1是一个稳定的组件类型，React会通过浅比较props来决定是否重新渲染。而你的代码中更新points时用的是浅拷贝：

   const lastPolygon = Object.assign({}, polygons[polygons.length - 1]);
   lastPolygon.points.push([Math.random() * 500, Math.random() * 500]);
   

   Object.assign是浅拷贝，lastPolygon.points仍然指向原数组的引用。即使你修改了数组内容，points的引用并没有改变，React会认为Polygon1的props没有变化，因此不会重新渲染，导致SVG的多边形无法更新。

另外还有一个隐藏问题：SVG的<polygon>的points属性需要的是字符串格式（比如"10 10, 20 20"），你直接传递二维数组的做法依赖React的自动toString()转换，这种转换并不符合SVG标准的最佳实践，可能引发意外问题。

解决方案 #

我们可以通过两种方式解决这个问题，同时规范points的格式：

方案1：确保points的引用不可变（推荐）

在更新多边形的点时，创建points的新数组引用，让React能检测到props变化：

// 外部定义Polygon1组件
const Polygon1 = ({ points, key }) => {
  // 将二维数组转换为SVG标准的points字符串
  const pointString = points.flat().join(' ');
  return <polygon key={key} stroke="blue" fill="none" points={pointString} />;
};

function Polygons() {
  const [polygons, setPolygons] = useState([]);

  return (
    <div className="App">
      <div>
        <svg width="500px" height="500px" version="1.1">
          {polygons.map((polygon, i) => {
            return <Polygon1 key={`polygon-${i}`} points={polygon.points} />;
          })}
        </svg>
      </div>
      <button onClick={() => {
        setPolygons([...polygons, { points: [[10, 10]] }]); // 初始化为二维数组
      }}>
        Add Polygon
      </button>
      <button onClick={() => {
        if (!polygons.length) {
          alert("Please add first Polygon");
          return;
        }
        // 深拷贝最后一个多边形的points数组，避免修改原引用
        const lastPolygon = {
          ...polygons[polygons.length - 1],
          points: [...polygons[polygons.length - 1].points, [Math.random() * 500, Math.random() * 500]]
        };
        const newPolygons = [...polygons.slice(0, -1), lastPolygon];
        setPolygons(newPolygons);
      }}>
        Add Point
      </button>
    </div>
  );
}

方案2：使用React.memo并自定义比较函数

如果你不想修改state的更新逻辑，可以用React.memo包裹Polygon1，并自定义比较函数来检测points数组内容的变化：

import { memo } from 'react';

// 自定义比较函数：比较points数组的内容是否变化
const arePropsEqual = (prevProps, nextProps) => {
  if (prevProps.points.length !== nextProps.points.length) return false;
  return prevProps.points.every((point, idx) => 
    point[0] === nextProps.points[idx][0] && point[1] === nextProps.points[idx][1]
  );
};

const Polygon1 = memo(({ points, key }) => {
  const pointString = points.flat().join(' ');
  return <polygon key={key} stroke="blue" fill="none" points={pointString} />;
}, arePropsEqual);

// 后续的Polygons组件逻辑保持你的原有写法即可

关键注意点 #

• 始终确保React state的更新遵循不可变原则，避免直接修改state中的数组或对象，而是创建新的引用。
• SVG的points属性建议显式转换为字符串格式，避免依赖React的自动转换，让代码更清晰且符合标准。

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