函数组件与类组件中setState的使用差异咨询

1. 更新逻辑本质不同 #

• 类组件的this.setState()是合并式更新：React会自动将传入的更新对象与当前state做浅合并，仅覆盖你指定的属性，未提及的属性会保留原有值。比如调用this.setState({showIndex: i})时，原state中的show: true会被自动保留，无需手动处理。
• 函数组件useState的setState是替换式更新：它会直接用传入的新值完全替换原state对象。如果仅传入{showIndex: i}，原state中的show属性会丢失，因此必须通过扩展运算符...state拷贝原有所有属性，再覆盖需要更新的字段，才能保留其他状态。

2. 状态存储与拆分灵活性不同 #

• 类组件的state是单一对象，React内部维护了合并逻辑，每次更新都基于当前最新state进行合并操作。
• 函数组件的useState支持将状态拆分为多个独立变量，比如你可以把示例中的状态拆分为：

  const [showIndex, setShowIndex] = useState(1);
  const [show, setShow] = useState(true);
  

  这样更新showIndex时直接调用setShowIndex(i)即可，无需考虑show状态，也不用写扩展运算符。当然你也可以像示例中那样把多个状态放在同一个对象里，但此时必须手动处理状态合并。

结合你的代码示例来看：
如果在Parent组件的setState中去掉...state，直接写setState({showIndex: i})，更新后的state会变成{showIndex: i}，show属性丢失，导致<Child>组件因state.show为undefined而无法渲染。但在类组件中执行相同操作，this.setState({showIndex: i})后，state仍会保留show: true，因为React自动完成了合并。

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