React .setState() 中的展开运算符

给出从 React 类组件中提取的以下代码片段：

constructor(props) {
    super(props)
    this.state = { active: true }
  }

  deactivate = () => {
    this.setState({ ...this.state, active: false })
  }

将展开运算符添加到 stopCounter() 方法中的目的是什么？该应用程序还可以删除它：

  deactivate = () => {
    this.setState({ active: false })
  }

在这种情况下两者都有效，但您不需要使用它。只需设置状态就可以了：

this.setState({active: false})

但是让我解释一下如果您有嵌套的状态级别，例如：

state = {
  foo: {
   a: 1,
   b: 2,
   c: 3
  }
}

当您只需要更新 foo 的 c 状态时，您需要合并状态，如下所示：

this.setState({ foo: {
  ...this.state.foo,
  c: 'updated value'
}})

因此，扩展语法将对象与后面的对象合并。它类似于对象.分配 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign.