React子组件懒加载咨询：可折叠UI组件性能优化需求

嘿，作为React新手就能提前考虑到大量组件场景下的性能优化，这点真的很赞！针对你说的「只加载展开状态折叠组件的子元素」需求，你想到的hasBeenLoaded状态思路完全合理，下面给你几个具体的实现方案，还有一些额外的优化技巧：

这个方案核心是用状态标记子组件是否已加载，第一次展开时才初始化子组件，之后展开直接复用已加载的内容（适合子组件初始化成本较高的场景）：

import { useState } from 'react';

// 单个折叠项组件
const CollapseItem = ({ title, children }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [hasBeenLoaded, setHasBeenLoaded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(prev => !prev);
    // 第一次展开时标记为已加载
    if (!isExpanded && !hasBeenLoaded) {
      setHasBeenLoaded(true);
    }
  };

  return (
    <div className="collapse-item">
      <button onClick={toggleExpand} style={{ padding: '8px 16px' }}>
        {title} {isExpanded ? '▼' : '▶'}
      </button>
      {isExpanded && (
        <div className="collapse-content" style={{ padding: '12px', borderTop: '1px solid #eee' }}>
          {/* 未加载时可以显示占位，已加载则渲染真实子组件 */}
          {hasBeenLoaded ? children : <div>加载中...</div>}
        </div>
      )}
    </div>
  );
};

// 批量折叠组件列表
const CollapseList = () => {
  // 模拟100个折叠项，每个包含100个子组件
  const collapseItems = Array.from({ length: 100 }, (_, i) => ({
    id: i,
    title: `折叠项 ${i + 1}`,
    children: Array.from({ length: 100 }, (_, j) => (
      <div key={j} style={{ margin: '4px 0' }}>子组件 {j + 1}</div>
    ))
  }));

  return (
    <div className="collapse-list" style={{ maxWidth: '600px', margin: '20px auto' }}>
      {collapseItems.map(item => (
        <CollapseItem key={item.id} title={item.title}>
          {item.children}
        </CollapseItem>
      ))}
    </div>
  );
};

export default CollapseList;

如果你的场景允许「收起时卸载子组件」（比如子组件占用内存较大，且用户不会频繁切换），可以简化掉hasBeenLoaded，直接通过isExpanded控制子组件渲染——收起时React会自动卸载子组件，释放资源。

如果每个折叠项的子组件是独立的大型模块，推荐用React.lazy和Suspense实现懒加载，进一步降低初始页面的加载时间：

import { useState, lazy, Suspense } from 'react';

// 懒加载子组件（假设子组件是独立文件）
const HeavyChildModule = lazy(() => import('./HeavyChildModule'));

const CollapseItem = ({ title }) => {
  const [isExpanded, setIsExpanded] = useState(false);
  const [hasBeenLoaded, setHasBeenLoaded] = useState(false);

  const toggleExpand = () => {
    setIsExpanded(prev => !prev);
    if (!isExpanded && !hasBeenLoaded) {
      setHasBeenLoaded(true);
    }
  };

  return (
    <div className="collapse-item">
      <button onClick={toggleExpand}>
        {title} {isExpanded ? '▼' : '▶'}
      </button>
      {isExpanded && (
        <div className="collapse-content">
          <Suspense fallback={<div>加载中...</div>}>
            {hasBeenLoaded && <HeavyChildModule />}
          </Suspense>
        </div>
      )}
    </div>
  );
};

这种方式下，只有用户展开对应折叠项时，才会加载该子组件的代码包，初始加载速度会快很多。

1. 用React.memo减少不必要重渲染：把CollapseItem用React.memo包裹，当组件props没有变化时，阻止无意义的重渲染：

const CollapseItem = React.memo(({ title, children }) => {
  // 组件内容不变
});

2. 用useMemo缓存子组件：如果子组件的内容不会动态变化，可以用useMemo缓存，避免每次渲染都重新创建子组件实例：

const memoizedChildren = useMemo(() => {
  return Array.from({ length: 100 }, (_, j) => <div key={j}>子组件 {j + 1}</div>);
}, []); // 空依赖数组，只初始化一次

3. 合理设置key：渲染折叠项列表时，一定要用唯一且稳定的key（比如示例中的item.id），避免React复用错误的组件实例。

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