# 组件模式
应用程序的现代 React 组件架构，强调类型安全、懒加载和 Suspense 边界。
---
## React.FC 模式（推荐）
### 为什么使用 React.FC
所有组件均使用 `React.FC` 模式以实现：
- Props 的显式类型安全
- 一致的组件签名
- 清晰的 Props 接口文档
- 更好的 IDE 自动补全
### 基础模式
typescript
import React from 'react';
interface MyComponentProps {
/** 要显示的用户 ID */
userId: number;
/** 动作发生时的可选回调 */
onAction?: () => void;
}
export const MyComponent: React.FC = ({ userId, onAction }) => {
return (
用户: {userId}
);
};
export default MyComponent;
**关键点：**
- Props 接口通过 JSDoc 注释单独定义
- `React.FC` 提供类型安全
- 在参数中解构 Props
- 底部默认导出
---
## 懒加载模式
### 何时使用懒加载
对以下组件进行懒加载：
- 重量级组件（DataGrid、图表、富文本编辑器）
- 路由级组件
- 模态框/对话框内容（初始不显示）
- 首屏下方内容
### 如何懒加载
typescript
import React from 'react';
// 懒加载重量级组件
const PostDataGrid = React.lazy(() =>
import('./grids/PostDataGrid')
);
// 针对命名导出
const MyComponent = React.lazy(() =>
import('./MyComponent').then(module => ({
default: module.MyComponent
}))
);
**来自 PostTable.tsx 的示例：**
typescript
/**
* 主文章表格容器组件
*/
import React, { useState, useCallback } from 'react';
import { Box, Paper } from '@mui/material';
// 懒加载 PostDataGrid 以优化包体积
const PostDataGrid = React.lazy(() => import('./grids/PostDataGrid'));
import { SuspenseLoader } from '~components/SuspenseLoader';
export const PostTable: React.FC = ({ formId }) => {
return (
);
};
export default PostTable;
---
## Suspense 边界
### SuspenseLoader 组件
**导入：**
typescript
import { SuspenseLoader } from '~components/SuspenseLoader';
// 或
import { SuspenseLoader } from '@/components/SuspenseLoader';
**用法：**
typescript
**作用：**
- 显示
粤公网安备44030002003366号