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

Posted 2023-02-22

【中文标题】从反应组件的状态中删除密钥的最佳方法

【英文标题】：The best way to remove a key from react component's state

【发布时间】：2020-09-10 10:39:23

【问题描述】：

我正在使用一个 React 类组件，它拥有一个状态，其中（比如说……）存储了很多键值对。 在用户操作（按钮按下/切换）时，我需要删除/添加一个新的键值对到组件的状态。添加一个相对容易，但是从状态中提取一个键值对可以通过几种不同的方式完成，所以我想知道哪一个是最好的、最易读的、性能最好的和最受 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);

可能有更多方法可以做到这一点，我想知道哪一种可能是最好的，可以在任何情况下使用，无论国家变得多么“大”......

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

谢谢！

【问题讨论】：

这个问题表面上似乎是主观的，但实际上并非如此。选项 1 根本不是一个选项，它违反了 React 规则之一：永远不要直接修改状态。

【参考方案1】：

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

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

我喜欢这种方式而不是您的选项 2 的原因是主观的 - 它对我来说非常可读。复制一份，delete 一把钥匙。简单明了。

【讨论】：

完全合理的选择。从用于损害其属性查找性能的对象中删除属性（对于那些重要的 0.0001% 次），但我认为这不再是真的（或者至少不是 as 真的）。

【参考方案2】：

选项 1 不是一个选项。你在 React 中 can't directly modify state。

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

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

【讨论】：

嗯，选项二是我使用的，但我在其中看到 2 个不太好的东西：添加额外的两个变量，添加一个未使用的变量，并且 linter 是警告...