React元件開發規範

React元件規範

檔案命名

• 每一個檔案隻包含一個元件，每一個基本元件隻包含單一功能  
• 如果檔案傳回是一個類，檔案名首字母大寫  
• 測試用例檔案名使用.spec.jsx字尾  
• 每一個元件使用一個單獨的測試用例檔案  

Js規範

• 使用es6+開發，盡量使用常用的ES6+文法  
• 使用jsx文法  
• 元件檔案命名使用大駝峰， ComponentDemo  
• 帶命名空間的元件，如果一個元件包含隻有自身使用的子元件，以該元件為命名空間編寫元件，例如Table，Table.Head  
• 不使用displayName命名  
• 自定義屬性使用data-  
• 使用propTypes進行props類型校驗  
• 使用defaultProps定義預設參數  
• 定義props避開react關鍵字及保留字，常用的props及state定義可參考下表  
• 盡量少或者不使用ref擷取和操作dom節點，使用state和prop進行控制dom，如遇必須使用的情況，添加詳細注釋資訊  
• 事件調用使用在元素上onClick調用  
• 注意，react和html的表單元素的差異  
• 不支援mixin，使用decorator進行擴充和高階元件方式擴充。  
• 不能私自添加第三方js庫，如需要使用，必須通知本組組長，并在工作群裡提出，At所有前端負責人，經讨論後再添加
• 盡量多而有用的代碼注釋，方法使用塊級注釋  
• 避免使用定時器類的編碼，如必須使用，需添加詳細注釋，各組長合并代碼時需要審查是否合理，合确認是否含有銷毀方法  
• 自身定義的props屬性應避免與react的關鍵字相同  

樣式規範

• 在添加src/style/theme/default.sess中添加公共樣式變量，各開發人員盡可能使用裡面定義的公共樣式變量  
• 元件多樣式調用，使用classnames子產品，進行樣式處理，使用className調用  
• 所有元件類名命名以‘expo-’開頭  

通用元件接口規範

參數	說明	類型	預設值
size	尺寸	string	medium
color	顔色		''
shape	形狀
disabled	是否禁用	bool	false
className	增加額外的類名
htmlType	html dom 的 type 屬性
style	内聯樣式	object

參考連結

airbnb規範 代碼規範