Javascript 替换处于数组状态的元素（并受益于ReactJS快速渲染）

有一个React组件，其状态是svg元素的数组。在每次更新中，此数组中只有一个元素可能会更改。我想从react提供的明智和快速的渲染中获益。我使用以下代码来更新状态和渲染

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)
        });
    });
},

render:function（）{
返回(
{this.state.grid}
);
}
_setNewState:函数（索引，newState）{
此.setState（函数（状态）{
返回({
网格：state.grid[index].splice（索引，1，newState）
});
});
},

\u setNewState

在我们收到状态的新更改时被调用

我的问题:

1.如何替换处于数组状态的元素，以便仍能从快速呈现React中获益？在当前方法中快速呈现react是否有利于我？或者当数组发生变化时，整个场景将再次渲染？甚至那些没有改变的元素

2.在这种情况下，最好的方法是什么？我们是否需要一个状态数组而不是一个数组

---

注意：此数组中的每个元素都是一个具有唯一键的SVG元素。

如果稍微重构代码，使每个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>
    );
}

render:function（）{
返回(
{this.state.grid.map（函数（svg））{
返回（）
}}
);
}

实际上，在

setInitialState

中，我创建了带有唯一键的

SVG

s的初始数组。在每次后续更新中，只更改了一个特定的SVG元素。然后你的问题得到了回答，不是吗？你说的是“重构你的代码…”，我已经在我的代码中提到了我在评论中所说的内容，所以我想你可能是指其他的东西……我已经有了

SVG

元素和

id

s。