如何区分基础组件和业务组件

[GuoYongfeng]

郭永峰，2017-03-26

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

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

基础组件

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

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

业务组件

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

小结

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

[whatwg6]

e

[songhlc]

个人思考的组件分类： 1.纯展示：传入数据，产出DOM，虽然和业务有关但也属于通用基础组件（和4区分开因为不和某种业务强耦合） 2.交互型组件：如文中提到的基础组件，封装了通用的交互逻辑，强调组件的复用 3.功能性组件：基础组件中抽象出的一些通用功能，如动画组件，路由钩子等等，可以mixin到各组件中，用于更好辅助其他组件的产出 4.可复用业务组件：目前我们常见的场景有人员参照，部门参照这种基于交互型组件产出的可复用组件

现有大多数框架都强于交互型组件和部分的功能性组件 实际业务开发的难点是：如何在2和3的基础上快速产出1和4

[xileliu]

有具体的事例代码吗