在 react 大生態下，乙個比較成熟的前端團隊，都會面對乙個問題：如何提高團隊的開發效率？
乙個系統擁有大量的業務場景和業務**，相似的頁面和**層出不窮，如何管理和抽象這些相似的**和模組，這肯定是諸多團隊都會遇到的問題。
不斷的拷**？還是抽象成 ui 元件或業務元件？顯然後者更高效。
那麼現在就面臨乙個選擇：一是選擇 react 生態中已有的元件庫，例如 antdesign、material-ui 等比較成熟的元件庫；二是團隊再開發一套屬於自己的元件庫。有讚前端團隊選擇了後者，產出並開源了 zent ，zent 提供了一整套基礎的 ui 元件以及常用的業務元件，目前我們有 45+ 元件，這些元件都已經在有贊的各類 pc 業務中廣泛使用。本文我們就來聊一聊如何開發一套優秀的 react 元件庫以及一套完整元件庫的構成。
react 大環境裡面有很多優秀的 ui 元件庫，國內比較有名的 antdesign，國外的 material-ui，都是比較穩定和優秀的元件庫。那麼我們為什麼還要自己去開發一套元件庫呢？原因大致如下：
構建乙個完整的元件庫需要考慮：
元件是對一些具有相同業務場景和互動模式**的抽象，元件庫首先應該保證各個元件的視覺風格和互動規範保持一致，x元件在a業務場景是乙個互動，在b業務場景是另乙個 ui 風格，這樣就無法對x進行抽象，極大的增加了元件的構建成本。所以，設計元件之初，首先需要抽象和約定一套統一的視覺風格和互動規範。
其次，元件庫的 props 定義需要具備足夠的可擴充套件性，而且元件內部完全受控，保持元件具有統一的輸入和輸出，讓我們來看乙個 button 的例子。
// button is a react component of zent
button 甚至提供了a標籤的功能，只要在button上傳入 props：href。
// button as 有讚首頁
有讚前端內部元件庫，使用的是開源 lint 工具--felint 。
felint 是乙個整合了 eslint、stylelint、git hook 的前端**檢查工具。felint 為你的專案做以下三件事：
初始化 eslint/stylelint 配置檔案，無論是 react 專案、vue 專案、es5 還是 es6 都提供了針對性的配置方案
安裝 eslint/stylelint 及其依賴到當前專案的 node_modules 裡
掛載 git 鉤子，在你提交**時進行強制校驗
約定好元件的設計思路和**規範以後，接下來我們就可以參與開發元件了，元件庫的基本開發流程，包括以下幾點：
zent 裡面有乙個元件初始化命令：yarn new-component，這個命令完成了元件大部分初始化工作，包括自動建立元件需要的目錄和模版**，新增元件 js 和 css **。然後，我們就可以開始寫元件**，**風格和規範嚴格按照 lint 的規範編寫，如果不符合規範，是不能提交**的。寫完元件以後，需要寫元件 demo 並執行，方式是本地啟動 server 來執行元件 demo，這個可以元件作為元件的除錯工具。
js 單元測試框架有很多，chai、jest、mocha、karma 等等，zent 元件庫使用的是 jest + enzyme 的組合，下面來看乙個例子：
// button ui test
import from 'enzyme';
describe('button', () => );
});
yarn test用來執行測試指令碼，測試結果會顯示在終端。
元件日常維護佔整個元件庫生命週期的很大一部分，元件庫做起來了以後，元件功能後續會不斷迭代，也許是 bug fix，也可能是 new feature，這些元件的迭代我們通過 pr 和 issue 來管理，同時，我們需要管理好元件的 changelog。
總的來說，元件維護主要包括：pr / issue 的處理，發包和管理 changelog。
下面以 zent 為例，來介紹一下 pr 規範。
pr 標題規則：[ bug fix / breaking change / new feature ] 元件名字：修改內容描述
pr 用來生成 changelog，規範的 pr 有助於生成比較清晰的 changelog，一目了然，來看一下 zent 的例子：
元件發包
元件發包只有擁有發包許可權的人才能操作，zent 是以元件庫為單位發包的，yarn build會將整個 zent 的**打包，使用命令yarn publish發包，在發包之前會跑元件測試，只有測試通過以後才能發包。
元件文件
乙份好的 doc 是乙個優秀元件庫的標準，良好的文件能夠提公升元件庫的整體品質和好感度，願意花時間好好寫 doc 的團隊，那麼他們產出的元件庫應該也不會差到哪去，元件庫文件維護也是元件庫生命週期裡重要的一環，有時候你甚至需要做到中英文雙語 doc。
在本文中，我們從元件的設計思路、編碼規範、開發流程、測試、日常維護這五個方面闡述了如何構建乙個 react 元件庫，並且以 zent 為例講述了有讚是如何做的，任何乙個元件庫都需要的經過這個生命週期，但我們需要思考的是：如何營造乙個良好的元件庫生態環境？我們需要想辦法讓更多的人參與其中，共同作為元件庫的維護者，選擇開源是為了給 react 生態環境做輸出，在前端元件化已經成為了既定事實的今天，我們不需要重複的造輪子，而是需要在元件化方面嘗試新的突破，脫離前端技術的束縛，站在工程師的高度去抽象自己手頭的**。元件化這條路上，我們還有很多事情要做，zent 只是乙個開始。
react（二） 元件的通訊
對於元件來說，通訊無非兩種，父子元件通訊，和非父子元件通訊 一 父子父子元件通訊 1 父元件給子元件傳值 對於父元件來說，props是他們之間的媒介 class parent extends component componentdidmount 1000 render class child 1 ...
React學習（四）元件
元件 上面 中，變數 hellomessage 就是乙個元件類。模板插入 時，會自動生成 hellomessage 的乙個例項 下文的 元件 都指元件類的例項 所有元件類都必須有自己的 render 方法，用於輸出元件。注意，元件類的第乙個字母必須大寫，否則會報錯，比如hellomessage不能寫...
VUE 元件（二）元件通訊
元件關係可分為父子元件通訊 兄弟元件通訊 跨級元件通訊。一 自定義事件 當子元件向父元件傳遞資料時，就要用到自定義事件 子元件用 emit 來觸發事件，父元件用 on 來監聽子元件事件 通過兩個按鈕實現 1 1的效果，在改變元件data中的count後，通過 emit 將值傳給父元件，父元件用v o...