从反应组件的 state 中删除密钥的最佳方法

Question

我正在使用一个反应 class 组件，该组件包含一个 state，其中（可以说..）存储了很多键值对。 在用户操作（按钮按下/切换）后，我需要删除/添加一个新的键值对到组件的 state。 添加一个相对容易，但是从 state 中提取一个键值对可以通过几种不同的方式完成，所以我想知道哪一个是最好的、最易读的、性能最好的，也是 ReactJS 观众最喜欢的。

1) 选项 1：

onRemove = key => {
    const newState = this.state;
    delete newState[key] // Interacts directly with the state, which might not be a good practice, or expended behaviour?
    this.setState(newState);
}

2) 选项 2：

onRemove = key => {
    const {[key]: removedKey, ...newState} = this.state; // Defines two new variables, one of which won't be used - "removedKey";
    this.setState(newState);
}

可能有更多方法可以做到这一点，我想知道哪一种可能是最好的，可以在任何情况下使用，无论 state 有多大……

请根据您在 React 和 State 管理方面的工作经验分享您的想法！

谢谢！

Answer 1

当我做这样的事情时，我通常会做你的“选项 1”的修改版本。 正如您目前拥有的那样，选项 1 会改变 state object，这是您不应该做的。 相反，创建 state 的浅表副本，然后删除密钥。

onRemove = key => {
    const newState = {...this.state};
    delete newState[key];
    this.setState(newState);
}

我喜欢这种方式而不是您的选项 2 的原因是主观的——这对我来说非常易读。 制作副本， delete密钥。 简单明了。

Answer 2

选项 1 不是一个选项。 你不能在 React 中直接修改 state 。

选项 2 是相当标准的做法。

第三个（在我看来较小）选项是在克隆 object 后删除该属性，但从对象中删除属性并不是 JavaScript 引擎优化的目标，所以我认为它与选项 2 相比没有任何优势。