React Native：如何在Tab导航器中用新页面替换当前页面？

• 核心优化思路：放弃同时渲染所有页面的方式，只渲染当前激活的页面。用单个状态变量记录当前选中的页面标识，替代10个独立的布尔状态，从根源减少不必要的DOM渲染。

• 具体实现步骤：

  1. 定义一个状态（比如activePage），存储当前要显示的页面唯一标识（可以是0-9的索引，或者自定义的页面ID）。
  2. 第一个标签页的按钮点击时，更新activePage为对应页面的标识。
  3. 在第二个标签页的内容区，根据activePage的值，仅渲染对应的页面组件，而非全部渲染后通过布尔值控制显示隐藏。

• React场景下的代码示例：

  import { useState } from 'react';
  // 导入所有页面组件
  import Page0 from './pages/Page0';
  import Page1 from './pages/Page1';
  import Page2 from './pages/Page2';
  import Page3 from './pages/Page3';
  import Page4 from './pages/Page4';
  import Page5 from './pages/Page5';
  import Page6 from './pages/Page6';
  import Page7 from './pages/Page7';
  import Page8 from './pages/Page8';
  import Page9 from './pages/Page9';
  
  // 把页面组件存进数组，方便通过索引获取
  const PageComponents = [Page0, Page1, Page2, Page3, Page4, Page5, Page6, Page7, Page8, Page9];
  
  function App() {
    // 默认显示第一个页面
    const [activePage, setActivePage] = useState(0);
  
    return (
      <div>
        {/* 顶部按钮栏 */}
        <div className="tab-btn-group">
          {PageComponents.map((_, idx) => (
            <button
              key={idx}
              onClick={() => setActivePage(idx)}
              // 给当前激活的按钮加样式标识
              className={activePage === idx ? 'active-btn' : ''}
            >
              页面 {idx + 1}
            </button>
          ))}
        </div>
  
        {/* 内容展示区：只渲染当前选中的页面 */}
        <div className="tab-content">
          {React.createElement(PageComponents[activePage])}
        </div>
      </div>
    );
  }
  
  export default App;
  

• 进阶优化（针对重组件）：
  如果页面组件包含大量逻辑或资源，可以用懒加载进一步提升初始加载速度：

  import { useState, lazy, Suspense } from 'react';
  
  // 懒加载页面组件，只有当需要渲染时才加载对应的文件
  const PageComponents = [
    lazy(() => import('./pages/Page0')),
    lazy(() => import('./pages/Page1')),
    // ... 其余8个页面同理
  ];
  
  function App() {
    const [activePage, setActivePage] = useState(0);
  
    return (
      <div>
        {/* 按钮栏部分同上 */}
        <div className="tab-btn-group">
          {PageComponents.map((_, idx) => (
            <button
              key={idx}
              onClick={() => setActivePage(idx)}
              className={activePage === idx ? 'active-btn' : ''}
            >
              页面 {idx + 1}
            </button>
          ))}
        </div>
  
        {/* 用Suspense包裹，加载时显示占位内容 */}
        <div className="tab-content">
          <Suspense fallback={<div>加载中...</div>}>
            {React.createElement(PageComponents[activePage])}
          </Suspense>
        </div>
      </div>
    );
  }
  

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