React中更新组件state时的扩展运算符(...)有何作用？

我是React初学者，正在学习展示REST API返回对象的教程。在handleChangeTitle方法中，我获取输入框中的值，并通过新的activeItem更新组件状态，代码如下：

handleChangeTitle(e){
    //ogni volta che cambia qualcosa nella casella di testo, viene chiamata questa funzione
    var name = e.target.name
    var value = e.target.value 
    console.log('Name:', name)
    console.log('Value:', value)
    this.setState({
      activeItem:{
        ...this.state.activeItem,
        title:value
      }
    })
  }

请问在引用this.state.activeItem前的扩展运算符(...)有什么作用？

这个扩展运算符（...）在这里的核心作用就是浅拷贝原activeItem对象的所有属性，再在新对象里覆盖title属性，最终得到一个更新后的新对象用来更新状态。

具体来说：

• React要求状态不可直接修改，必须通过setState传入新对象触发更新。如果直接修改this.state.activeItem.title，React检测不到状态变化，不会重新渲染组件。
• 如果不用扩展运算符，直接写activeItem: {title: value}，新的activeItem就只剩title这一个属性，原对象里的其他属性（比如id、completed这类）都会丢失。
• 用...this.state.activeItem会把原对象的所有属性复制到新对象中，后面的title: value会覆盖原对象的title值，这样既保留了其他属性，又更新了需要修改的title，完全符合React状态更新的规则。

内容的提问来源于stack exchange，提问作者Davide