【前端工程】基於React antd二次封裝前端組件庫的思考

組件庫創建的意義

設計組件庫好處是什麼？

1. 設計組件庫能提升協做效率。（這是站在研發效率和時間成本的角度）
2. 設計組件庫能成爲公司的技術資產，新同事來公司後能夠快速調用和上手，就算有同事離職，也不會對產品的總體體驗形成影響。（這是站在公司招聘成本的角度）
3. 設計組件庫可讓產品體驗統一，有助於公司創建統一的產品品牌認知，方便銷售和運營包裝、運營、策劃產品方案。（這是站在銷售運營部門的角度）

組件開發思想

咱們基於公司項目UI作定製化的組件庫具體在作什麼？

一、樣式上：基於開源框架的組件封裝成公司的產品UI設計的特有樣式的組件，以及封裝經常使用的佈局樣式。
二、功能上：沉澱開源框架中沒有的經常使用組件。

開發準則

• 小步快跑快速迭代
• 測試組件庫的可用性

組件的類型

組件的種類能夠分爲哪些？

• 按照邏輯和視圖劃分：容器型組件（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組件化開發