如何全局声明React组件以保留状态？无需状态管理库方案求助

嘿，这个问题我之前做项目切换组件时也踩过坑！核心是得先搞懂React渲染时的实例销毁逻辑——你之前尝试的保存JSX元素或直接返回组件实例的方式没踩对路子，我给你拆解几个可行的方案：

方案1：通过「隐藏而非卸载」保留组件状态（最推荐，改动最小） #

React里组件一旦从DOM树中被移除，对应的实例就会被销毁，状态自然就丢了。所以最简单的解决办法是始终让组件挂载在DOM里，只通过CSS控制显示/隐藏，这样实例一直存在，状态就能完整保留：

render() {
  return (
    <div>
      {/* 两个组件始终渲染，用display控制可见性 */}
      <AccountInformation 
        style={{ 
          display: this.state.selectedScreen === Screens.accountInformation 
            ? 'block' 
            : 'none' 
        }}
        ref={(sender) => { this.accountInformationMod = sender; }}
      />
      <MyInformation 
        style={{ 
          display: this.state.selectedScreen === Screens.myInformation 
            ? 'block' 
            : 'none' 
        }}
      />
    </div>
  )
}

这种方式几乎不用改现有代码，对你中途的项目非常友好，切换时只是视觉上的显示变化，组件的状态、用户输入的内容都能完整保留。

方案2：缓存组件元素引用，复用同一实例 #

如果你不想让组件一直挂载在DOM里，也可以提前创建好组件的JSX元素并缓存，确保每次渲染都返回同一个引用——React会根据元素的key和引用判断是否复用实例：

constructor(props) {
  super(props);
  // 在构造函数里提前创建好组件元素，保存为实例属性
  this.accountInfoJSX = <AccountInformation 
    key="fixed-account-key"
    ref={(sender) => { this.accountInformationMod = sender; }}
  />;
  this.myInfoJSX = <MyInformation key="fixed-my-key" />;
}

get currentScreen() {
  if (this.state.selectedScreen === Screens.accountInformation) {
    return this.accountInfoJSX;
  } else {
    return this.myInfoJSX;
  }
}

render() {
  return <div>{this.currentScreen}</div>;
}

注意这里必须给组件加固定的key，并且确保返回的是缓存好的同一个JSX引用——如果每次都重新创建<AccountInformation />，React会认为是新组件，重新创建实例导致状态丢失。不过这个方法有个局限：如果组件需要接收动态props，缓存的JSX不会自动更新props，需要手动处理，所以方案1还是更稳妥。

为什么你之前的尝试失败了？ #

• 返回this.accountInfoJSX但状态丢失：大概率是你没有缓存这个JSX元素，而是每次在getter里重新创建，导致React每次都生成新的组件实例；
• 返回this.accountInformationMod页面无内容：React渲染时只接受JSX元素（也就是<Component />这种形式），直接返回组件实例不符合React的渲染规则，所以不会显示任何内容。

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