再谈组件

React 组件的神奇之处就在于它们的可复用性，你可以创建由其他组件组成的组件，但是随着嵌套越来越多的组件，我们需要将它们拆分为不同的文件，以便轻松浏览文件并在更多地方重复使用它们。

比如在 src/App.js 中，我们创建两个组件：

const Profile = () => {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

const App = () => {
  return (
    <div>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </div>
  );
}

export default App;

如果我们想把配置文件放在其他地方或者改变登陆屏幕，就需要把这两个组件从根组件文件中移出，这样可以使它们能更好地模块化以及更容易被复用，你可以：

新建一个 JS 文件放入组件
将组件导出
将其导入使用该组件的文件中

就像这样，新建一个 Gallery.js 文件：

// 新建的 src/Gallery.js 文件
const Profile = () => {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

// 重命名为Gallery
const Gallery = () => {
  return (
    <div>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </div>
  );
}

// 导出组件
export default Gallery;

原有的 App.js 文件：

// 导入所需组件
import Gallery from "./Gallery";
// import Gallery from './Gallery.js';  这样也是可以的

export default function App() {
  return <Gallery />; 
}

导入导出

export 有两种导出方式，默认导出和命名导出，两种导出对应的导入方式也不同。

一个文件只能有一个默认导出，但可以有任意多个命名导出，两者并不冲突，可以同时存在。

新建 src/Test.js 文件：

export function Button() {
  // 命名导出
  ...
}
  
export function Nav() {
  // 命名导出
  ...
}

export default function App() {
  // 默认导出
  ...
}

导出方式不同，导入方式肯定不同：

命名导入函数名称必须与导出名称匹配，这也是称它为命名导入的原因
默认导入可以输入你想要的任意名称

在 src/App.js 导入组件：

// 命名导入
import { Button } from './Test';
import { Nav } from './Test.js';	// 可以带.js后缀

// 默认导入
import App from './Test';
import Apple from './Test';			// 任意名称

如果文件只导出一个组件，我们选择默认导出，多个组件和值选择命名导出，更具体的导入导出请查看 MDN 文档。

但无论怎么样，请选择有意义的名称，尽量做到【见名知意】。

专栏

因为参加打卡活动是每日更新，所以可能比较短小，可以关注一下 React 入门专栏。

在更新完后会整合为一整篇，感谢关注和点赞！

2022 React 最速上手指南（五）—— 再谈组件 & 导入导出

再谈组件

导入导出

专栏