React Suspense使用疑问：如何避免重复编写组件提升效率

完全没必要因为重复代码就放弃Suspense，它在异步状态管理上的简洁性和组件渲染流程的清晰度是很值得保留的。针对你遇到的重复编写组件的问题，最直接高效的解决方式是提取共享布局组件，把Button和Duplicate的结构抽成通用组件，加载和加载完成状态都复用这个组件即可。

方案示例：提取共享布局组件 #

const Duplicate = ({ children }) => {
  return <section>{children}</section>
};

// 抽取出通用布局，根据传入的状态渲染不同内容
const ComponentLayout = ({ isLoading, disabled, displayName }) => (
  <div>
    <Button 
      disabled={isLoading ? true : disabled} 
      label="example" 
    />
    <Duplicate>
      {isLoading ? 'Loading..' : displayName}
    </Duplicate>
  </div>
);

const Component = () => {
  const { data } = useQuery('fetch/any', fetcher, { suspense: true });
  // 加载完成时传入实际数据
  return (
    <ComponentLayout 
      isLoading={false} 
      disabled={data.disabled} 
      displayName={data.name} 
    />
  );
};

const Loading = () => {
  // 加载状态传入loading相关的默认值
  return <ComponentLayout isLoading={true} />;
};

const Render = () => {
  return (
    <Suspense fallback={<Loading />}>
      <Component />
    </Suspense>
  );
}

其他可选思路 #

如果你的场景更复杂，还可以考虑：

• 渲染props模式：让布局组件接收一个渲染函数，动态生成内容，但对于当前场景来说有点过度设计。
• 组合式逻辑封装：把加载状态相关的逻辑抽成自定义Hook，配合布局组件使用，但核心还是复用布局结构。

总之，提取共享布局是最简洁高效的方案，既保留了Suspense的优势，又彻底解决了代码重复的问题。

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