前端在组件化的实现道路上一直都是前仆后继的，各种框架的解决思路层出不穷。时至今日，伴随着类似 React 、Vue 等优秀的前端框架出现，组件化的解决方案几乎成为 webapp 开发的标准，尽管实现的方式不同，但理念都趋同。

我们需要从设计时就从组件化角度的思考，我们作为开发者，需要从这些众多组件中提取出哪些是基础组件，哪些是业务组件，哪些组件可被复用等。

基础组件

基础组件主要指那些本身不包含任何业务逻辑、可以被轻松复用的组件，例如 picker、timepicker、toast、dialog、tree 等等。

基于 React 或是 Vue 实现一套通用的基础组件库，打包所有基础组件，可以让开发使用非常方便。而对于基础组件的通讯，基本就是往组件传入 prop 即可，组件内部的状态操作和事件监听在组件内部完成。

业务组件

业务组件主要指那些包含业务逻辑，也包括一些与后端接口通讯的逻辑。业务组件会包含若干个基础组件，通常我们会把一些业务逻辑的数据通过 类似 Redux 和 Vuex 等统一的状态管理库管理起来，然后组件内部读取数据和提交对数据修改的动作。

小结

基础组件通常都是可复用的，部分业务组件同样可复用，它们的 UI 和业务逻辑相似。我们可以把单个可复用的业务组件单独发布到 npm 私服上（或者内部 Gitlab 维护），需要使用的业务线依赖即可（不包含业务机密的业务组件也可直接放到 Github ）。