react项目如何引入组件
引入组件的基本方法
在React项目中，可以通过import语句引入组件。组件可以是本地文件中的自定义组件，也可以是第三方库提供的组件。
引入本地组件
确保组件文件路径正确，通常使用相对路径（./或../）引入。
import MyComponent from './components/MyComponent';引入第三方库组件
如果使用如react-router-dom、antd等库，直接通过包名引入。
import { Button } from 'antd';默认导出与命名导出
默认导出（Default Export）
组件文件使用export default导出时，引入时无需花括号。
// MyComponent.js
export default function MyComponent() { ... }
// 引入方式
import MyComponent from './MyComponent';命名导出（Named Export）
组件通过命名导出时，需用花括号指定名称。
// utils.js
export function HelperComponent() { ... }
// 引入方式
import { HelperComponent } from './utils';动态导入（懒加载）
对于性能优化，可使用React.lazy和Suspense实现组件的动态加载。
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}注意事项
- 文件扩展名：若项目配置了
resolve.extensions（如Webpack），可省略.js或.jsx后缀。 - 路径别名：通过
jsconfig.json或tsconfig.json配置别名，简化深层路径。 - 循环依赖：避免组件间相互引用，可能导致运行时错误。
示例：完整组件引入
// App.js
import React from 'react';
import Header from './components/Header'; // 本地组件
import { Button } from 'antd'; // 第三方组件
function App() {
return (
<div>
<Header />
<Button type="primary">Click</Button>
</div>
);
}
export default App;
