javascript - 更改 1 个状态属性会触发重新渲染整个元素和所有子元素

Question

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

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

this.state = { ...db };

现在，当我只更新这些对象中的一个时，所有父元素都会重新呈现。我怎样才能避免这种情况，只渲染发生变化的那部分。我应该如何设置状态(哪种方式/方法)，以便 react 的浅层比较仅针对该特定元素对象而不是整个状态对象返回真值？

目前，这是我设置状态的方式:

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

Answer 1

你不能。 React 的浅层比较(通过 PureComponent)将简单地检查对象是否不同。由于它是不同的，它会触发重新渲染。它无法知道要重新渲染“什么”，就像在某种部分渲染中一样。

您最好的选择是让子级 PureComponent 自己或通过 shouldComponentUpdate 应用一些行为。您仍然会触发父级渲染，但子级会足够聪明，不会重新渲染。

作为警告，我建议不要在这里变得太聪明。您可以轻松地同时使事情变得更复杂和性能更低。 React 的渲染器通过虚拟 DOM 差异工作，因此如果组件的实际 DOM 渲染没有改变，它不会做太多事情。当然，您仍然有重新渲染虚拟 DOM 和检查差异的开销，因此在可能的地方使用 PureComponent/shouldComponentUpdate 是有意义的。但这并不像 React 一直在昂贵地重新创建您的整个 HTML。

有很多文档讨论了避免重新渲染的最佳实践。 This one似乎是您要找的东西。