新增父Window组件嵌套后子组件状态被转移重置，如何保留各Window独立状态？

问题根源 #

不要将React组件实例直接存储在state中，这是官方不推荐的错误写法。state仅可用于存储渲染所需的纯数据（如窗口配置、业务数据等），组件应当通过state数据在render阶段动态生成。直接存储组件实例会破坏React的虚拟DOM Diff逻辑，导致组件身份识别错误、状态错位/重置等异常。

正确实现方案 #

你可以通过存储窗口元数据+动态渲染的方式实现需求，全程不操作组件实例：

1. 调整state结构，仅存储窗口配置列表，每个配置项携带唯一ID用于身份识别：

state = {
  windows: [
    { id: 'window_1', title: 'Window 1' }
  ]
}

2. 新增窗口时仅修改state中的配置列表，不要直接操作组件：

// 新增Window 2的逻辑
this.setState(prevState => ({
  windows: [
    ...prevState.windows,
    { id: 'window_2', title: 'Window 2' }
  ]
}))

3. render阶段遍历配置列表渲染Window组件，必须给每个组件绑定唯一且固定的key属性，保证React可以正确识别每个组件的身份，不会乱复用状态：

render() {
  return (
    <div>
      {this.state.windows.map(conf => (
        <Window 
          key={conf.id}
          title={conf.title}
          // 其他需要传递的props
        />
      ))}
    </div>
  )
}

扩展说明 #

如果需要实现窗口嵌套效果，只需要给每个窗口配置项增加children字段存储子窗口配置，渲染时递归处理即可。只要key不变，对应Window组件的内部状态就会被保留，新加入的key对应的组件会自动生成独立的专属状态，完全符合预期。

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