从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&State Management的工作经验分享您的想法!

谢谢!

评论
  • Stanf
    Stanf 回复

    Option 1 isn't an option. You can't directly modify state in React.

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

    第三个(我认为较少)的选项是在克隆对象后删除属性,但是从对象删除属性并不是JavaScript引擎优化的,因此与选项2相比,我看不出它有什么优势。

  • Avery
    Avery 回复

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

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

    The reason I like this way over your Option 2 is subjective--It's very readable to me. Make a copy, delete a key. Simple and to the point.