Question

我有一个React应用程序，我相信 - 虽然不确定 - 那个＆＃34;嵌套状态＆＃34;导致我延误。

这就是事情：

我将状态保存在名为 dataset 的变量中。

dataset 是一个对象数组，如下所示：

(5) [{…}, {…}, {…}, {…}, {…}]

并且每个对象具有以下结构：

{id: '5', name: 'Bob', url: 'http://example.com', paid: 'yes'}

最后，我的渲染方法在表格中显示数据：

...
{dataset.map((entry) => (
    ...
    <tr id={entry.id}><td>{entry.name} has paid: {entry.paid}</td></tr>
    ...
))}

这一切似乎都运转良好，但随后我需要更新状态，因为大概是用户5号本月没有付款我这样做：

// copy current state
let new_dataset = this.state.dataset.slice(); 

// modify the copy
new_dataset[5].paid = !this.state.dataset[5].paid;

// replace old state with the modified copy
this.setState({
    dataset: new_dataset
});

但问题是：

React会更新所有5行还是仅包含我修改过的对象的行？

对于一行中的小变化，反应更新10000行不会浪费吗？这种情况的最佳做法是什么？

提前致谢。

P.S。我已经查看了如何Avoid Reconciliation，但我不确定如何应用这种情况。

Answer 1

React会更新所有5行还是仅包含对象I的行改性？

它只会更新changed。这就是和解的目的;我不确定你为什么要寻找避免它的方法。但是，在您的情况下，您应该使用keys。

Answer 2

React会更新所有5行还是仅包含我修改过的对象的行？

它只会使用已更改的内容更新DOM，但它仍将遍历dataset数组中的所有项目。如果数组中有许多项目，迭代以及对帐过程本身需要时间。

所以这里的问题实际上不是实现本身 - 对于中小型阵列来说，这是一种非常常见的方法。但是，如果您的数组中确实有大型条目，您可能会注意到性能命中，在这种情况下，您可能希望找到不同的实现。

那就是说，我确实在你的代码中发现了一个小错误：

您使用this.state.dataset.slice();正确创建了数组的副本，但是您没有创建要变异的对象的副本。所以你很有必要直接改变国家。所以改为：

// copy current state
let new_dataset = this.state.dataset.slice(); 

// copy the object
let obj = Object.assign({}, new_dataset[5]);

// modify the copy
obj.paid = !obj.paid;

// replace the array item with the new object
new_dataset[5] = obj;

Answer 3

React会更新所有5行还是仅包含对象I的行改性？

不会再没有反应渲染所有5行。而是反应优化许多事情，以便不再渲染相同的变化。其中一个问题是key属性。此外，React运行一个diffing算法来仅渲染更改

在React中使用嵌套状态进行渲染优化

3 个答案: