Javascript 更改1状态属性会触发整个元素和所有子元素的重新呈现

我有一个父组件，其状态如下：

var db = {
    one: {
        name: 'xyz',
        color: 'blue',
        seen: false
    },
    two: {
        name: 'abc',
        color: 'red',
        seen: false
    },
    ........and so on many objects
};

this.state = { ...db };

现在，当我只更新其中一个对象时，所有父元素都将重新渲染。我怎样才能避免这种情况，而只渲染已更改的部分。我应该如何设置状态（哪种方式/方法），以使反应的浅层比较仅对该特定元素对象有效，而不对整个状态对象有效

目前，我是这样设置状态的：

this.setState(state => {
    state[objectKeyName] = _editedObject;
});

---

你不能。React的浅层比较（通过

PureComponent

）只需检查对象是否不同。由于它不同，因此会触发重新渲染。它无法知道“什么”要重新渲染，就像在某种部分渲染中一样

最好的办法是让孩子们自己

PureComponent

s，或者通过

shouldComponentUpdate

应用一些行为。您仍然会触发父级渲染，但子级会足够聪明，不会重新渲染

作为警告，我建议在这里不要太聪明。你可以很容易地让事情变得更复杂，同时降低性能。React的渲染器通过虚拟DOM扩散工作，因此，如果组件的实际DOM渲染没有改变，那么它不会做很多事情。当然，您仍然需要重新呈现虚拟DOM并检查差异，因此如果可以的话，在适当的位置使用

PureComponent

/

shouldComponentUpdate

是有意义的。但React并不是一直在昂贵地重新创建整个HTML

---

有很多关于避免重新渲染的最佳实践的文档。似乎正是您想要的。

我是否理解正确：当父级重新渲染时，您希望其部分子级重新渲染，但其他子级不重新渲染？如果是这样，子组件可能需要添加

shouldComponentUpdate

方法。但是，如果不看到这些子组件，则很难给出详细信息。可能是重复的