仿Android Activity系统开发：复用ReactElement时state被重置问题

state被重置是React组件卸载后重新实例化导致的，核心逻辑如下：

• 你通过<Act />生成的actE是静态的React元素（JSX描述对象），仅用于声明组件类型、props等配置，不是组件实例本身，也不会持有组件的内部state。
• 第一次将actE传入App渲染时，React会创建一个全新的Act类实例，你调用act.setState({k: "v"})修改的是这个临时实例的内部state。
• 当你将App的渲染内容切换为act2E时，旧的Act实例会被React执行卸载流程，实例本身和内部state都会被销毁，你之前保存的act变量指向的已经是被卸载的无效实例。
• 最后再次把actE传入App渲染时，React会根据actE的配置生成完全新的Act实例，自动执行constructor初始化state，因此k的值为初始的null，和之前被卸载的旧实例没有任何关联。

要实现类似Android Activity的页面栈管理，不要直接把JSX元素存在state中，推荐采用以下方案：

• 页面栈仅存储页面标识（如页面名称、枚举值）和对应的页面持久化数据，不要依赖组件内部state存储需要保留的页面状态。
• 渲染时根据页面标识动态匹配对应组件，将存储的页面状态作为props传入组件渲染即可。
• 如果需要保留页面操作过程中的临时状态，可以将状态上提到页面管理器统一存储，或者引入组件缓存方案避免切换页面时组件被卸载。

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