react如何引用组件
引用组件的基本方法
在React中引用组件主要分为两种方式：默认导出（Default Export）和命名导出（Named Export）。根据组件的导出方式，引用方法有所不同。
默认导出的组件引用
若组件通过export default导出，引用时无需使用花括号：
import ComponentName from './path/to/Component';命名导出的组件引用
若组件通过export const或export function导出，引用时需使用花括号：
import { ComponentName } from './path/to/Component';动态导入组件
对于按需加载的场景，可以使用React.lazy实现动态导入：
const LazyComponent = React.lazy(() => import('./path/to/Component'));需配合Suspense组件使用：
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>高阶组件（HOC）引用
通过高阶组件包装目标组件时，通常直接传递组件引用：
const EnhancedComponent = hocFunction(OriginalComponent);注意事项
-
路径规范
使用./或../表示相对路径，或配置alias简化深层路径引用。 -
循环依赖
避免组件间相互引用导致循环依赖，可通过状态提升或重构组件解决。 -
性能优化
动态导入适用于代码分割，减少初始加载体积。静态导入则更适合核心组件。
