翻译 | 如何规模化 React 应用

朱乙(沪江前端开发工程师)
本文为原创翻译,如需转载请标明出处,不当之处敬请指出

我们最近发布了 React Boilerplate 3.0,在发布前几个月,我们与数百位开发者进行了沟通,讨论了他们是如何构建和规模化WEB应用的。下面将我们从中学到的东西分享给大家。

《翻译 | 如何规模化 React 应用》

很早我们就意识到,我们不希望React Boilerplate仅仅是“另一个模板项目”,我们希望它能为开发者提供创业或研发产品的最优解决方案。

过去,规模化大多和服务器系统有关。随着使用的用户越来越多,你需要确保能在集群中添加更多的服务器,数据库能够拆分到多台服务器上。

但现在,随着富WEB应用的崛起,规模化在前端也变得越来越重要!一个复杂应用的前端也需要能应付得了大量的用户、开发者和模块,需要重视这三个方面(用户、开发者和组件)的规模化,否则后面就会碰到问题。

容器和组件

对于一个大的应用,第一个大的改进就是,了解有状态(容器)和无状态(组件)组件的区别。容器管理数据和连接状态,通常没有样式。而组件则有样式,但不负责任何数据和状态的管理,最初我比较迷惑。基本上,容器负责让组件正常工作,组件负责东西如何展示。

根据这一点,我们清楚地区分了可复用组件和数据管理层。现在你去编辑组件时,就不用担心会搞混数据结构;编辑容器,也不用担心弄乱样式了。按照这个思路开发应用将会变得很简单!

代码结构

按照惯例,开发者们会按照类型来组织结构,比如使用 actions/,components/,containers/ 等文件夹。

假设有一个名称为NavBar的导航条容器,容器会管理与之相关的状态,还有一个toggleNav动作来打开关闭它。下面就是按类型组织的文件结构:

react-app-by-type
├── css
├── actions
│ └── NavBarActions.js
├── containers
│ └── NavBar.jsx
├── constants
│ └── NavBarConstants.js
├── components
│ └── App.jsx
└── reducers
└── NavBarReducer.js

这种组织方式用来做样例还可以,但如果你有成百上千个组件,开发就会很困难。每添加一项功能,你就必须在上千个文件中找到正确的文件。这非常讨厌,也容易让人感到疲劳。

经过长期追踪我们的 Github 问题列表和很多不同尝试后,我们找到了一种更好的解决方案:

那就是按照功能来组织代码!也就是,把和某个功能(比如导航条)相关的所有文件放到同一个文件夹里。

下面是重新组织的 NavBar 代码:

react-app-by-feature
├── css
├── containers
│    └── NavBar
│       
├── NavBar.jsx
│        ├── actions.js
│        ├── constants.js
│        └── reducer.js
└── components
└── App.jsx

开发这个应用,只需要进入一个目录,如果添加一个功能,也只需要创建一个目录。这种方式非常有利于文件的重命名、文件和替换,多人协作也不会导致任何冲突。

当我第一次知道这种开发React应用的方式时,我在想,我为什么还要按照原来的思路做?这种开发方式太赞了!

需要注意的是,这种组织方式并不意味着 redux actions 和 reducers 只能用在这个组件里,它们可以(也应该)用于其他组件中!

当我按照这个思路开发的时候想到了两个问题:

1.该如何处理样式?
2.该如何处理数据获取?

样式管理

除了结构的考虑之外,由于CSS本身的两个特点,在基于组件的架构中使用 CSS 很难:全局命名和继承。

唯一的类名

假设在某个大型应用中存在这段 CSS代码:

.header { /* … */ }
.title {
       background-color: yellow;
}

很快你就会发现问题,title 太常用了。其他开发者也可能会写出以下代码:

.footer { /* … */ }
.title {
       border-color: blue;
}

这就产生了一个命名冲突,然后你的title样式就多了一个蓝色边框,让你不得不在上千个文件中找到这段代码。

幸运的是,有大牛为我们找到了解决方案,那就是 CSS Modules。CSS Modules 的关键之处在于:把组件的样式放在组件自己的文件夹里。

react-app-with-css-modules
├── containers
└── components     
   └── Button         
      ├── Button.jsx         
      └── styles.css

现在的CSS看起来没有任何区别,不过我们不再担心命名冲突了,可以使用非常常见的名字:

.button {
   /* … */
}

然后就可以在组件中通过require或import引入这些CSS文件,并在 className 中使用了:

/* Button.jsx */
var styles = require('./styles.css');
<div className={styles.button}></div>

如果你现在去查看对应的 DOM 结构,你会看到<div class=”MyApp__button__1co1k”></div>!CSS Modules 帮你保证了类名的“唯一”。

为每个组件重置属性

在 CSS 中,特定的属性会在 DOM 节点上下继承。比如,如果父节点有 line-height,而子节点没有,子节点就会自动继承父节点的 line-height。

在基于组件的架构中,这可不是我们想要的。比如下面的代码:

.header {
   line-height: 1.5em;
   /* … */
}

.footer {
   line-height: 1;
   /* … */
}

假设我们在这两个组件中渲染一个 Button,这个 Button 在这两个组件里会有不同的外观!这一点不仅适用于 line-height,也适用于其他能继承的属性。

在以前,我们可以用 Reset CSS、Normalize.css 和 sanitize.css 来重置样式表。但如果我们想将这一理念落实到每一个组件上呢?

这就是PostCSS 插件PostCSS Auto Reset 的用途!它会对每个组件进行样式重置,将所有能继承的 CSS 属性设置成默认值,从而覆盖继承。

数据拉取

基于组件的架构面临的第二大问题就是数据拉取。对于大部分 action 来说,将 action 和组件放在一起很合理,但数据拉取是全局 action,不和某个组件相连!

目前大多数开发者使用 Redux Thunk来处理Redux 中的数据拉取。标准的thunked action如下:

《翻译 | 如何规模化 React 应用》

这种在 action 中拉取数据的方法很棒,但存在两个问题:很难测试这些函数,以及在 action 中包含数据拉取看起来不太对。

Redux 的一大好处就是 pure action creator 很容易测试。而在 action 中加入了 thunk 的数据拉取操作之后,你必须两次调用 action,模拟 dispatch 函数等。

最近,redux-saga 在 React 世界引起了广泛关注。redux-saga 利用了 ES6 的 Generator 函数,让异步代码看起来就像同步代码一样,而且让异步流非常容易测试。redux-saga 给人的感觉是一个单独处理所有异步事务的独立线程,不会干扰应用的其他方面!

下面是 redux-saga 的一个例子:

《翻译 | 如何规模化 React 应用》

上面的代码读起来就像小说一样,避免了回调地狱,而且非常容易测试。为什么?这是因为 redux-saga 导出的这些“作用”(effect)无需完成即可进行测试。

我们在文件顶部 import 的这些作用都是 handler,可以让我们轻松与 redux 交互:

  • put() 派发一个action

  • take() 暂停 saga 直到action发生

  • select() 获取部分 redux 状态(有点像 mapStateToProps)

  • call() 调用传入的第一个位置的函数,并将其他参数作为被调用函数的参数

为什么这些作用有用?让我们看看下面的测试:

《翻译 | 如何规模化 React 应用》

只有 generator.next() 被调用时,generator 函数才会继续,直到遇到下一个 yield 关键字!另外,我们也把测试文件和组件放在了一起。

用 redux-saga 来做胶水中间件

我们的组件现在真正解耦了。它们不关心其他组件的样式或逻辑;它们只关心自己的事情(绝大多数情况下如此)。

假设有一个 Clock 和一个 Timer 组件。当 Clock 中的按被按下时,我们想要启动 Timer;当 Timer 中的停止按钮被按下时,我们想要在 Clock 中显示时间。
你也许会这么做:

《翻译 | 如何规模化 React 应用》

但这么做的话,你无法单独使用这两个组件,复用它们几乎不可能!

不过,我们可以用 redux-saga 来做这两个解耦组件的“胶水中间件”。取决于应用类型,我们可以通过听取特定 action,来以不同方式作出反应,从而让组件真正变得可复用。

先修改两个组件:

《翻译 | 如何规模化 React 应用》

注意两个组件现在只关心自己,只 import 了自己的 action !

下面用一个 saga 来把这两个解耦的组件连接到一起:

《翻译 | 如何规模化 React 应用》

漂亮!

总结

  • 容器和组件的区别

  • 按功能组织代码文件

  • 使用 CSS modules 和 PostCSS Auto Reset

  • 使用 redux-saga:

    • 获得可读并且可测试的异步流

    • 将解耦组件连接到一起

《翻译 | 如何规模化 React 应用》

《翻译 | 如何规模化 React 应用》

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

    原文作者:iKcamp
    原文地址: https://segmentfault.com/a/1190000010999251
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞