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.如何替换数组状态中的元素仍然可以从React的快速渲染中获益？在当前方法中，我是否能从快速渲染反应中获益？或者当数组发生变化时，整个事物会再次渲染？甚至那些没有改变的因素呢？

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

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

Answer 1

如果稍微重构代码，以便每个SVG元素获得唯一键，您可以轻松地从高效渲染中受益。此键允许diffing算法确定组件是否相同。没有改变的元素不会在每个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>
    );
}

替换数组状态中的元素（并从ReactJS快速渲染中获益）

1 个答案: