React：避免在状态更改时重新呈现Component

Question

HERE IS A GIST

这个小程序会在您点击的位置绘制一个随机的形状。 当你点击某个形状时，它应该被删除。

删除有效，但之后所有形状都会重新渲染。如何避免重新渲染形状？

Answer 1

你可以尝试这个，生成id并使用该id作为键而不是我认为React DOM基于键呈现元素：

constructor(props) { 
 super(props); 
 this.id = 0; // add id
 ....
} 

addShape(e) { 
 ...     
 updatedShapes.push({ 
   x: e.clientX, 
   y: e.clientY,
  id: this.id++ 
 }); 
 ...
} 

randomShape(shape)
{
  ...
  <circle ... key={shape.id} .../>;
  ...
}