【前端工程】基于React antd二次封装前端组件库的思考

组件库建立的意义

设计组件库好处是什么？

1. 设计组件库能提高协作效率。（这是站在研发效率和时间成本的角度）
2. 设计组件库能成为公司的技术资产，新同事来公司后可以快速调用和上手，就算有同事离职，也不会对产品的整体体验造成影响。（这是站在公司招聘成本的角度）
3. 设计组件库可以让产品体验统一，有助于公司建立统一的产品品牌认知，方便销售和运营包装、运营、策划产品方案。（这是站在销售运营部门的角度）

组件开发思想

我们基于公司项目UI做定制化的组件库具体在做什么？

1、样式上：基于开源框架的组件封装成公司的产品UI设计的特有样式的组件，以及封装常用的布局样式。
2、功能上：沉淀开源框架中没有的常用组件。

开发准则

• 小步快跑快速迭代
• 测试组件库的可用性

组件的类型

组件的种类可以分为哪些？

• 按照逻辑和视图划分：容器型组件（Container）与展示型组件（stateless）
• 按照状态划分：有状态组件和无状态组件
• 按照 UI 划分：布局组件和内容组件
• 纯组件和非纯组件

容器型组件（Container）与展示型组件（stateless）
前者关注逻辑，后者关注视图UI，两者的区别，3个方面来详情区分：关注点、数据源、组织形式。

展示型组件比如：一个菜单栏组件，接收props传递的数据，只用来渲染数据展示UI。

import  React  from  'react'

import  'antd/es/menu/style'

import { Menu } from  'antd'

import { MenuProps } from  'antd/lib/Menu'

import  './side-menu.less'

import { colorMap } from  './util'

class  SideMenu  extends  React.PureComponent<MenuProps, any\> {

render() {

const { ...other } = this.props

const  props: any = this.props

let  header = null

let  theme = props.titleTheme

let  styleName = colorMap\[theme\] ? colorMap\[theme\] : colorMap\['default'\]

  

if (props.title) {

    header = (

    <div  className\={\`side-menu-title ${styleName}\`}\>

    <span\>{props.title}</span\>

    </div\>

    )

}

  

return (

    <div  className\="panda-side-menu"\>

    {header}

    <Menu  {...other}  style\={{ flex:  'auto', overflowY:  'auto' }}\>

    {props.children}

    </Menu\>

    </div\>

  )
 }
}

export  default  SideMenu

容器组件比如：一个带搜索功能的Tree组件，由多个展示组件构成，同时包含了获取tree数据源的请求逻辑。

分离逻辑和视图的主要方式有:

• hooks
• 高阶组件
• Render Props
• Context

布局组件和内容组件

开发思想

基于antd二次封装组件或自定义antd没有的组件。

基于antd二次封装什么？

在保证完全具备原有antd具备的组件功能的情况下封装如下组件：

• 基于antd组件封装公司内部设计的独有样式组件
• 基于antd组件扩展业务组件
• 沉淀常用业务模版

通用组件设计原则
单一原则

未完待续。。

参考资料
React组件设计实践总结02 - 组件的组织
如何用项目思维，从0-1建立设计组件库
前端组件设计原则
React组件化开发