多页面站点中如何按需加载ContentComponent对应页面内容以优化性能？

绝对可以实现！你现在的思路方向是对的，咱们可以通过条件渲染+按需加载的方式，彻底解决内容全量渲染导致的加载慢问题。下面分两种方案给你拆解：

基础方案：基于props的条件渲染 #

这个方案最直接，只需要让ContentComponent根据传入的content prop，动态返回对应页面的内容，其他页面的内容根本不会被渲染到DOM中：

// ContentComponent.js
const ContentComponent = ({ content }) => {
  // 根据传入的content值，返回对应内容
  switch(content) {
    case 'page1':
      return <div>content for page 1</div>;
    case 'page2':
      return <div>content for page 2</div>;
    // 可选：处理未匹配到的情况
    default:
      return <div>请选择有效页面</div>;
  }
};

export default ContentComponent;

使用的时候就和你预想的一样：

// page1.js
import ContentComponent from './ContentComponent';

const Page1 = () => {
  return <ContentComponent content="page1" />;
};

// page2.js
import ContentComponent from './ContentComponent';

const Page2 = () => {
  return <ContentComponent content="page2" />;
};

这个方案的核心是：只有当前页面的内容会被React渲染到DOM中，其他页面的内容不会生成任何DOM节点，直接减少了初始渲染的工作量。

进阶方案：代码分割+动态导入（适合大体积内容） #

如果每个页面的内容包含大量组件、图片或复杂逻辑，仅仅不渲染DOM还不够——咱们可以把每个页面的内容拆成单独的组件文件，只有当需要的时候才加载对应的代码，进一步降低初始页面的打包体积：

第一步：拆分页面内容组件 #

把每个页面的内容单独写成组件：

// Page1Content.js
const Page1Content = () => {
  return <div>content for page 1（包含大图/复杂组件等）</div>;
};

export default Page1Content;

// Page2Content.js
const Page2Content = () => {
  return <div>content for page 2（包含大图/复杂组件等）</div>;
};

export default Page2Content;

第二步：修改ContentComponent实现动态加载 #

利用React的lazy和Suspense实现按需加载：

// ContentComponent.js
import React, { lazy, Suspense } from 'react';

// 动态导入组件：只有当组件被使用时，才会加载对应的文件
const Page1Content = lazy(() => import('./Page1Content'));
const Page2Content = lazy(() => import('./Page2Content'));

const ContentComponent = ({ content }) => {
  const renderTargetContent = () => {
    switch(content) {
      case 'page1':
        return <Page1Content />;
      case 'page2':
        return <Page2Content />;
      default:
        return <div>请选择有效页面</div>;
    }
  };

  // Suspense用来在组件加载过程中显示占位内容
  return (
    <Suspense fallback={<div>页面加载中...</div>}>
      {renderTargetContent()}
    </Suspense>
  );
};

export default ContentComponent;

这个方案的优势是：不仅不渲染未使用的内容，连对应的组件代码都不会在初始加载时下载，只有用户切换到对应页面时才会请求并加载该部分代码，大幅提升页面的初始加载速度。

如果你的项目用了React Router之类的路由库，还可以直接在路由层面实现代码分割，每个路由对应一个懒加载的页面组件，这也是单页应用中按需加载的常用方式，但你的需求用上面两种方案就能完美满足啦。

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