react如何引用组件
引用组件的基本方法
在React中引用组件通常分为两种方式：默认导出和命名导出。根据组件的导出方式，引用方法略有不同。
默认导出的组件引用方式：
import ComponentName from './path/to/Component';命名导出的组件引用方式：
import { ComponentName } from './path/to/Component';相对路径与绝对路径
引用组件时需要注意路径的正确性。相对路径以./或../开头，表示从当前文件位置出发查找组件。绝对路径通常配置在项目的jsconfig.json或tsconfig.json中。
// 相对路径
import Button from '../components/Button';
// 配置后的绝对路径
import Button from 'components/Button';动态导入组件
React支持动态导入组件，这种方式适用于代码分割或按需加载的场景。动态导入返回一个Promise，通常与React.lazy配合使用。
const LazyComponent = React.lazy(() => import('./path/to/Component'));
function MyComponent() {
return (
<React.Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</React.Suspense>
);
}类组件与函数组件的引用
无论是类组件还是函数组件，引用方式都相同。React不区分组件的实现方式，只关心组件是否被正确导出。
// 函数组件
function MyFunctionalComponent() {
return <div>Functional Component</div>;
}
// 类组件
class MyClassComponent extends React.Component {
render() {
return <div>Class Component</div>;
}
}
// 引用方式相同
import { MyFunctionalComponent, MyClassComponent } from './components';组件引用时的注意事项
确保组件文件扩展名正确，通常为.js、.jsx、.ts或.tsx。在引用时可以省略扩展名，但需要确保项目配置支持。
检查组件是否具有默认导出。如果组件使用export default，引用时不需要花括号；如果使用命名导出，则需要花括号。
避免循环引用，即A组件引用B组件，同时B组件又引用A组件，这会导致应用崩溃。
