组件的范围

所以，这是一个 <Banner /> 组件的实现，旨在向用户显示一条消息：

import React from 'react';

import Banner from './Banner';

const EXAMPLE_USER = {
  name: 'Sayen',
  registrationStatus: 'verified',
};

function App() {
  return (
    <Banner
      type="success"
      user={EXAMPLE_USER}
    >
      Successfully logged in! Welcome aboard, {EXAMPLE_USER.name}!
    </Banner>
  );
}

export default App;

Open Sandbox

花几分钟考虑一下这个组件，以及它的结构。你对此有什么看法？

让我们讨论一下。

小修正

在上面的视频中，我讨论了一个假设的 BlackFridaySaleBanner 。这个假设的组件接受了 type 和 children 作为属性。

不过，仔细想想，这个组件可能不需要这些属性，因为黑色星期五促销横幅应该始终具有相同的类型，并且可能具有相同的内容。

这是视频中的最终代码：

import React from 'react';

import { LoggedInBanner } from './Banner';

const EXAMPLE_USER = {
  name: 'Sayen',
  registrationStatus: 'verified',
};

function App() {
  return (
    <LoggedInBanner
      type="success"
      user={EXAMPLE_USER}
    >
      Successfully logged in! Welcome aboard, {EXAMPLE_USER.name}!
    </LoggedInBanner>
  );
}

export default App;

Open Sandbox

原子设计

几位学生询问这个概念与 Atomic Design 的比较。

如果你不熟悉，原子设计的核心思想是我们的用户界面分为五个层级：

atomic-design （图片由 Brad Frost 提供，来自 Atomic Design 主页。）

从概念上讲，它非常相似；“原子”是像 <Button> 或 <Slider> 这样的超级可重用原语。原子被组合成分子，分子则稍微不那么可重用（例如，可能是一个内部使用 <Button> 的 <Modal> ）。另一方面，“页面”是为给定路由渲染的所有内容的总和。

主要区别在于：我的“组件光谱”理念没有离散的组。它是一个流动的光谱。

现实世界的问题在于它很混乱。在简单的情况下，很容易对它们进行分类： <Button> 是一个原子， <CheckoutPage> 是一个页面。但在实践中，事情要模糊得多。两个不同的开发者可能会看着同一个组件，并对它应该如何分类产生分歧。

我更喜欢流动的光谱，因为我们不需要将组件放入严格的类别中，因此关于组件属于哪一边的争论机会更少。这种方式更宽容，同时仍然为我们提供了一个有用的心理模型，可以用来判断我们的组件是否结构良好。

这在文件/目录结构方面变得尤为重要。我更喜欢将我的所有组件保存在一个扁平的 components 目录中。使用原子设计，一些团队试图按类型（ /components/atoms 、 /components/molecules 等）组织他们的组件。在我看来，这是个坏主意；这意味着开发人员会消耗精力并浪费时间试图弄清楚每个组件适合哪个盒子。反直觉的是，这可能会使组件更难找到，因为同一团队的不同开发人员对每个组件应该放在哪里有自己的看法。

但没错，这只是我的经验！你的情况可能会有所不同。

额外资源

几年前，Facebook 开发者 Cheng Lou 在 React Europe 上发表了一场演讲，“关于抽象的光谱”。这是一场难以理解的演讲；Cheng 有计算机科学背景，这一点很明显。我不得不看好几遍才能真正理解他所说的内容。但这是一场令人震惊的演讲，充满了非常有趣的见解。

组件的范围

视频摘要