react导入导出实现

导出组件或函数

在React中，使用export关键字导出组件、函数或变量。默认导出（export default）适用于单一主要导出，命名导出（export）适用于多个导出。

默认导出示例：

// Button.js
const Button = () => <button>Click</button>;
export default Button;

命名导出示例：

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

导入组件或函数

使用import关键字导入其他文件中的内容。默认导入需与导出时的名称一致，命名导入需使用花括号{}指定名称。

默认导入示例：

// App.js
import Button from './Button'; // 与导出文件名一致

命名导入示例：

// App.js
import { add, subtract } from './utils'; // 必须与导出名称匹配

混合导入导出

同一文件可同时使用默认导出和命名导出。

导出示例：

// components.js
export const Header = () => <h1>Header</h1>;
const Footer = () => <footer>Footer</footer>;
export default Footer;

导入示例：

// App.js
import Footer, { Header } from './components'; // 默认导入在前，命名导入在后

重命名导入/导出

通过as关键字解决命名冲突或简化名称。

重命名导入：

import { add as sum } from './utils'; // 将add重命名为sum

重命名导出：

// utils.js
const multiply = (a, b) => a * b;
export { multiply as mul }; // 导出时重命名

动态导入（按需加载）

使用import()动态加载模块，适用于代码分割或懒加载。

// 动态导入组件
const loadComponent = async () => {
  const module = await import('./LazyComponent');
  const LazyComponent = module.default;
  return <LazyComponent />;
};

注意事项

• 路径规范：导入时需正确填写文件路径（如./表示当前目录）。
• 导出一致性：命名导入的名称必须与导出时完全一致（区分大小写）。
• 默认导出限制：每个文件只能有一个export default。

通过合理使用导入导出，可以高效组织React项目的模块化结构。