React 中的模块化与导入/导出

什么是模块？

通常建议每个文件只定义一个类，以增强代码的内聚性。这些文件本质上就是模块。例如，如果在一个文件中同时定义了 Person 和 Student 两个类，可以将它们拆分为两个模块，并分别命名为 Person.js 和 Student.js。注意，这些文件必须放在你的 App 目录下。

你知道吗？ 模块中定义的类默认是私有的，其他项目中的文件无法访问。你可以通过使用 import/export 语句将其设为公开。

幸运的是，JavaScript 社区最终统一采用 ES6 的 import 和 export 语法来导入和导出文件中的功能。

然而，对于刚接触 React 和 JavaScript ES6 的开发者来说，这些 import 和 export 语句在开始第一个 React 应用时可能还需要额外解释。很快你就会遇到导入 CSS、SVG 或其他 JavaScript 文件的需求。create-react-app 项目模板已经包含了这些导入语句：

1import React, { Component } from 'react'; 
2import logo from './logo.svg'; 
3import './App.css';

这对入门项目非常友好，因为它让你全面体验如何导入和（导出）其他类型的文件。同时，App 组件也会被导入到 src/index.js 文件中。但在学习 React 的初期阶段，我建议先避免引入这些导入语句，而是专注于 JSX 和 React 组件的学习。只有当需要将第一个 React 组件或 JavaScript 函数拆分到其他文件时，再逐步引入 import 和 export 语句。

那么，import 和 export 语句是如何工作的呢？查看 myfile.js 文件的最后一行，可以看到变量 firstname 和 lastname 是如何从 myfile.js 导出到其他文件的。之后，可以在另一个文件中通过相对路径导入它们：

因此，import 和 export 并不局限于组件或函数，而是用于共享任何可以赋值给变量的内容（这里暂不包括 CSS 或 SVG 的导入/导出，仅讨论 JavaScript）。你还可以将另一个文件中所有导出的变量作为一个对象整体导入：

导入时还可以使用别名。当从多个文件导入具有相同命名导出的功能时，就可能需要使用别名：