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

现在，当我仅更新这些对象中的1个时，将重新呈现所有父元素。我如何才能避免这种情况，而只渲染已更改的部分。我应该如何设置状态（哪种方式/方法），以便做出反应的浅表比较仅对特定元素对象而不对整个状态对象真实？

当前，这是我设置状态的方式：

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

Answer 1

不能。 React的浅表比较（通过PureComponent）将仅检查对象是否不同。由于它与众不同，因此会触发重新渲染。像某种局部渲染一样，它无法知道要重新渲染的内容。

您最好的选择是让孩子自己PureComponent，或者通过shouldComponentUpdate采取一些行为。您仍然会触发父级渲染，但是子级将足够聪明以至于无法重新渲染。

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

周围有很多文档讨论了避免重新渲染的最佳实践。 This one似乎正是您想要的。

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

1 个答案: