在上文中，笔者介绍了 Monorepo 这一项目组织方式、Lerna 这个用于便捷管理 monorepo 项目的工具以及它们在开源项目中的应用。那这一次就来聊聊 Monorepo 如何在 WebApp 中落地。

2020 年 4 月 16 日，前端业内最知名的框架之一——vue——发布了大版本 3.0 的第一个 beta 版本，增加了许多新特性、新功能，并进一步对性能进行了优化，让我们来看看都有哪些激动人心的变化

在上文中提到了一种基于 mobx 的 React 组件设计方案：它将状态与逻辑剥离到 mobx 中，并通过工厂函数将它们与组件进行关联、注入，通过分层解决了前端组件基于UI进行测试的脆弱性与组件生命周期被自动调用影响测试结果的问题。但这种设计模式同样产生了一些新的问题，在本篇中，我们将逐一尝试解决。

About

Monorepo

Monorepo 是一种项目的组织方式，许多开源项目均采用这种组织方式，如create-react-app、react-router、babel，基本的项目结构如下

1
2
3
4
5
6

├── packages
|   ├── pkg1
|   |   ├── package.json
|   ├── pkg2
|   |   ├── package.json
├── package.json

React 是目前最流行的 Web 前端 UI 框架之一，借助其创造的 JSX 语法，可以将前端项目以组件为单位进行构建。而蓬勃发展的社区也对如何设计 React 下的组件进行了大量的讨论与实践，甚至还有专门的参考书。今天，笔者将列举自己接触到的 React 组件设计模式。

主流的 React 组件设计模式

在 React v16.7 之前，大多数 React 组件都是基于 Class 的。典型的 React Class 组件结构如下：