时间戳

首页 > 解决方案 > 1 状态属性的更改触发整个元素和所有子元素的重新渲染

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

现在，当我只更新这些对象中的 1 个时，所有父元素都被重新渲染。我怎样才能避免这种情况，只渲染改变的那部分。我应该如何设置状态（哪种方式/方法），以便做出反应的浅层比较仅针对该特定元素对象而不是整个状态对象返回 true？

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

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

标签： javascriptreactjs

解决方案

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

你最好的选择是要么让孩子们成为PureComponent他们自己，要么通过shouldComponentUpdate. 您仍然会触发父渲染，但孩子会足够聪明，不会重新渲染。

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

有很多关于避免重新渲染的最佳实践的文档。这似乎是你要找的。

推荐阅读