react如何引入组件

引入组件的常见方法

直接导入默认导出组件
当组件文件使用 export default 导出时，可通过以下方式导入：

import ComponentName from './path/to/Component';

导入命名导出组件
若组件通过命名导出（如 export const Button），需使用解构语法：

import { Button } from './path/to/components';

动态导入（懒加载）
使用 React.lazy 实现按需加载，通常配合 Suspense 使用：

const LazyComponent = React.lazy(() => import('./path/to/Component'));

注意事项

路径规范

• 使用相对路径（如 ./ 或 ../）或配置别名（通过 webpack 或 vite 的 resolve.alias）。
• 文件扩展名通常可省略（需配置模块解析规则）。

循环依赖
避免组件间相互导入导致循环引用，可通过提升公共依赖或重构组件解决。

类型支持（TypeScript）
添加类型声明确保类型安全：

import type { Props } from './path/to/types';