替換元素處於陣列狀態（並從ReactJS快速渲染中受益）

Question

有一個React組件，其狀態是一個svg元素數組。在每次更新中，此數組中只有1個元素可能會更改。我想從反應提供的明智和快速的渲染中受益。我使用下面的代碼來更新狀態和渲染。

render: function() { 
    return (
     <div> 
      <svg width={Common.boardWidth} height={Common.boardHeight}> 
       {this.state.grid} 
      </svg> 
     </div> 
    ); 
} 

_setNewState: function(index , newState){ 
    this.setState(function(state){ 
     return({ 
      grid: state.grid[index].splice(index,1,newState) 
     }); 
    }); 
}, 

_setNewState每當我們收到狀態的新改變時都會被調用。

我的問題：

1.How我可以替換數組狀態的元素仍然陣營的快速渲染中獲益？目前的方法能夠快速呈現反應嗎？或者隨着數組的變化，整個事情會再次呈現？即使那些沒有改變的元素？

2.這種情況下最好的方法是什麼？我們是否需要有一個狀態數組而不是狀態數組？

注意：此數組中的每個元素都是一個具有唯一鍵的SVG元素。

Answer 1

如果您稍微重構代碼以便每個SVG元素都獲得唯一鍵，那麼您可以輕鬆地從高效渲染中受益。該鍵允許差異算法確定組件是否相同。沒有改變的元素將不會在每個setState調用中被重新排列。

render: function() { 
    return (
     <div> 
      <svg width={Common.boardWidth} height={Common.boardHeight}> 
       {this.state.grid.map(function(svg) { 
        return (<svg key={svg.key} ... the rest of the props/>)      
       }} 
      </svg> 
     </div> 
    ); 
}