组件的导出与复用是React开发的核心基础能力之一，也是构建可维护、可扩展React应用的关键前提。本章将承接上一节的内容，详细讲解如何导出React组件，并在应用的其他模块中实现组件复用，帮助开发者建立清晰的项目结构，提升代码的可维护性。
组件文件拆分的必要性
在之前的开发示例中，我们的 App 组件直接定义在 main.jsx 文件中。随着应用规模的扩大，若所有组件都集中在单个文件内，会导致代码结构混乱、可读性下降，不利于后续的维护与扩展。因此，将组件拆分到独立的文件中，是React项目开发的最佳实践之一。
本节我们将以上一节的 App 组件为例，演示如何将其从 main.jsx 文件中迁移至独立的文件，并完成导出与复用操作，构建更加清晰、规范的项目结构。
定义与导出组件
首先，我们需要在项目的 src 文件夹中创建一个名为 App.jsx 的新文件，该文件将专门用于存放 App 组件。初始状态下，App.jsx 文件为空，接下来我们按照以下步骤完成 App 组件的定义与导出。
首先在 App.jsx 文件中定义 App 组件，定义方式与之前在 main.jsx 中完全一致。为了便于演示，我们在 App 组件中添加简单的渲染内容，使其返回一个 h1 标签，示例如下：
const App = () => {
return <h1>react is fun!</h1>
}在 App 组件创建完成后，要使 App 组件能够被应用的其他部分访问和复用，必须通过导出语句将其导出。在 React开发中，最常用的方式是使用 export default 语句进行默认导出，该方式适用于单个组件占主导的文件场景，也是组件导出的标准做法。如下所示：
const App = () => {
return <h1>react is fun!</h1>
}
export default App;因此，在 App 组件定义完成后，添加 export default App语句，即可完成 App组件的默认导出。这一行代码的核心作用是将 App 组件标记为当前文件的默认导出模块，允许其他文件通过导入操作访问该组件。
这只是导出 App 组件的一种方式，也可以将 App 组件改为函数声明组件，然后直接在 App 组件前面添加 export default 导出 App 组件。如下所示：
export default function App(){
return <h1>react is fun!</h1>
}导入与复用组件
完成App组件的导出后，我们需要更新 main.jsx 文件，移除其中原有的App组件定义，然后导入App.jsx中导出的App组件，从而实现 App 组件的复用。
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);在这段代码中，我们删除 main.jsx 中之前定义的 App 组件代码，通过import语句导入 App 组件。由于 App.jsx文件与 main.jsx 文件位于同一个目录下，因此导入路径以“.”开头，表示当前目录，无需指定完整路径。
需要注意的是，因为我们在App.jsx中使用了 export default 进行默认导出，才能够在 main.jsx 中使用这种简洁的导入方式，无需额外指定组件名称的匹配规则。
更新完成后，main.jsx 文件将成功导入 App 组件并正常使用，这一过程直观地体现了 React 组件的可复用性。将组件拆分到独立文件并通过导出/导入实现复用，不仅能使代码结构更加清晰、整洁，还能减少重复代码，提升开发效率，降低后续维护成本。
对于大型 React 应用而言，良好的项目组织结构与组件复用机制至关重要。合理拆分组件、规范使用导出/导入语法，能够让项目代码更具可读性、可维护性和可扩展性，为后续的功能迭代与团队协作奠定坚实基础。
至此，我们已完成 React 组件的导出与复用操作，掌握了 React 开发中最基础也最核心的技能之一。后续章节将在此基础上，进一步讲解多组件的复用、组件通信等高级用法。