使用 React 扩展原子设计

不久前，我第一次听说原子设计，这个名字听起来很吸引人，但我当时并没有花太多时间去研究它。几个月后，我加入了一个使用原子设计的团队。情况依旧如此，我又一次听到了这个概念，稍微了解了一下，就掌握了它的基本原理。

本文不会详细解释原子设计（AD），但我建议您阅读这篇文章。它详细解释了原子设计的方法和原因。

如果您阅读了上面提到的文章，您应该能够识别出 AD 的以下几个部分，您可以直接跳到设计系统部分；否则，以下是 AD 概念的概述：

原子

项目中包含的最小元素表示。例如，自定义锚点<a/>。

分子

一组原子，例如：一个标签和一个输入标签。

生物

例如，一组分子：一个表单，它由标签、输入框和按钮组成。

模板

一组生物体、分子和/或原子，这是我们未来页面的骨架，但仅仅是骨架，这里不应该使用任何数据。

页

使用模板但使用数据，如果您使用的是 Redux，则可以使用来自 Redux Store 的数据；如果您使用的是 GraphQL，则可以使用来自 GraphQL 的数据，等等。

设计系统

现在您对 AD 有了更深入的了解，接下来我们来看看如何利用它来创建我们的设计系统 (DS)。我们可以将设计系统视为一组组件/框架，我们可以将它们组合起来，生成应用程序所需的任何页面。例如，Bootstrap提供了一组可用于创建任何页面的组件。但是，我们希望我们的设计系统比 Bootstrap 更智能、更具可扩展性。

在开始创建 React + Redux 应用之前，我们的数据结构（DS）不需要完全准备好。它可以包含基本组件，并根据需要逐步扩展。当然，你需要准备好要创建的页面的所有元素。:)

假设我们要创建一个 Twitter 应用。为了避免文章篇幅过长，我将给出一些示例。

原子：

• 文本
• 按钮

分子：

• 图标 + 文字
• 一套纽扣

生物体：

• 推文（由文本、图标+文本、图像、链接、图标按钮组成）
• 热门榜单

模板：
以 Twitter 个人资料页面中的帖子列表模板为例。

页面：
已填写数据的模板。

但是，这在代码中会是什么样子呢？

我们的文件夹结构如下：（
这在我们的数据仓库中，以便我们可以在不同的项目中重复使用，并保持相同的外观和风格）

• 原子
• 分子
• 生物

这是我们的项目实施情况

• 模板
• 页

模板被定义为一组原子、分子和有机体，主要是哑组件，但在某些情况下，有机体需要具有一些状态（内部状态），例如复选框集中的选择状态，或模态框中显示的状态，但它们处理的状态与其实现无关。

// Template example
import React from 'react'

// We import from our Design System package the A-M-O elements that we need for our Template
import { ProfileHeader, LinkList } from 'my-design-system'

// We import from our local project the connected components to be used in this specific project
import { ConnectedPost } from './containers/ConnectedPost'

// This is our ProfileTemplate component definition, has nothing more than the skeleton
const ProfileTemplate = props => (
    < {...props} >
      <ProfileHeader {...profileHeaderProps}/>
      <LinkList {...linkListProps}>
      <ConnectedPost {...postProps}>
    </>
)

export default ProfileTemplate

页面是带有数据的模板，这意味着我们将 Redux Store 连接到它们（在本用例中），我们可以在模板内部连接组件，以便它们可以处理自己的内部状态并进行相应的更新。

// Page example

import React from 'react'
import { connect } from 'react-redux'

import ProfileTemplate from './Templates/ProfileTemplate'

const ProfilePage = props => (
    <ProfileTemplate {...props}/>
)

const mapStateToProps = {
    // our state to props implementation
}

const mapDispatchToProps = {
    // our dispatch to props implementation
}

export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage)

使用 AD 的最大优势在于，您可以使应用程序的外观和体验保持一致，并且您对组件所做的任何更改都会传播到其他项目中，无需单独更新和维护它们。如果在一个项目中运行正常，则在所有项目中也应该运行正常；但是，如果出现问题，则所有页面都会出现问题。幸运的是，我们有单元测试、端到端测试和 CI/CD 等工具来确保在部署新版本之前所有这些功能都能正常工作。

感谢阅读！