React:避免在状态更改时重新呈现组件

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} .../>;
  ...
}