javascript - React 惯用的方式来更新状态中的 Map 对象

Question

我正在使用 Map类(class)。

我有这样的状态:

{
    rows: new Map([])
}

每一行代表表中的一个条目。
我想以线程安全的方式独立和异步地更新每一行。

当每次修改都是这样时，执行 setState 的惯用 React 方式是什么(假设“fooId”已经插入到 Map 中):

const rows = this.state.rows;
const row = rows.get("fooId");
row.status = '75%';

this.setState({
    rows: rows
});

Answer 1

惯用的方法是使用功能 setState()因为您正在更新现有值而不是批量替换它。

this.setState((prevState) => {
  const nextRows = new Map(prevState.rows)
  // Creating a new Map this way does not clone the original data
  // This means that any update to an object in the map will update the previous map.
  // To avoid this, we create a new object using object spread and assign the updated value there.
  // This has the benefit of reducing memory allocations as well, if performance is your concern.
  // Though it should not be until you have proven it to be a concern.
  const nextEntry = {
    ...nextRows.get('fooId'),
    status: '75%'
  }
  return { rows: nextRows.set('fooId', nextEntry) }
})

使用 ImmutableJS 会更容易一些:

this.setState(prevState => ({ 
  rows: prevState.rows.update('fooId', entry => ({ ...entry, status: '75%' }))
}))

另外，只需要与@Jonas 所说的相矛盾:当您克隆 map 时，它只会克隆 map 的键和值之间的映射。它不会克隆 map 的值。这意味着所需的内存消耗比您想象的要低得多。

如果您确定不会使用旧 map 或旧 map 中引用的任何对象，您甚至可以取消使用 object-spread 创建新对象，而您只需承担复制 key 的影响/value 映射(并创建一个新对象)。如果你错了，这可能会导致一些非常令人困惑的错误(而且很容易出错)，所以我会坚持不可变的东西。

如果这真的成为一个性能问题，您可以以不同的方式构建数据，以减少对更改的分配。