機緣巧合之下，我在接到我司產品星級評價需求的前一天，看到了蝸牛老溼的《★tiny-rate 東半球最小的評級元件☆》，在大佬的啟發下我就十分順手的擼了一個移動端用的星級評價元件。
本篇會涉及的內容有：
- 評價元件的實現
- React元件開發淺談
- 小結&元件原始碼(不涉及業務)
星星評價元件的實現
元件的實現十分簡單，基本都是參照tiny-rate的寫法，就是在每顆星星的處理上有點區別：
星星填充的寫法與tiny-rate類似，也是兩層元素的疊加來模擬星星填充的效果，與之不同的是我給每顆星星(item)上都新增了點選事件，為了相容我們在移動端的使用。點選每顆星星時，獲取其序號，通過css3d的calc來計算出應該變化的寬度，從而達成星星填充的效果。
另外，由於☆與★在不同的手機上顯示的效果可能不盡相同，但因為元件設計模式是疊加，所以我們可以將其替換成圖片或是css畫成的符號，以保證各端展示的統一。
最終的效果是這樣滴--
React元件開發淺談
其實本次主要想記錄的內容是個人對React公用元件開發的一些看法--
明確元件功能
以這次的評價元件為例，在開發的是應該專注於評分的功能&顯示，其他的需求（例如GIF中點選星級之後展示的文字說明）或附屬功能都不應該寫到元件內，造成元件與弱相關業務的耦合，這樣才能為下次在其它情景中使用元件提供便利。
定義預設引數
作為一個公用的元件，對外暴露的Props是必不可少的，但是倘若我們在引用時，沒有了解清楚必須的Props有哪些時，很容易會造成引數的缺失或錯誤。這種時候如果元件內沒有定義相關的預設引數的話，會導致元件沒法正常掛載或者是遍地紅字。
以上述評級元件為例↓↓
// 在元件頭部就應該定義支撐元件正常執行的Props引數
static defaultProps = {
canClick: true, // 可否點選
rateNum: 5, // 星星個數
handleSelectRate: null, // 選中星星後的回撥
rateValue: 0 // 選中星星的個數
}
複製程式碼留意元件擴充
我們的專案肯定是不斷在迭代的，所以我們在設計元件的時候也應該考慮到其靈活性，面對可能出現的需求迭代，應保留相應的配置空間。
如圖中的width計算，在this.state.rateValue沒有被賦值的情況下，我們會使用this.props.rateValue中的值來進行展示，這樣就為我們的元件擴充出展示功能，不僅是在這個頁面負責評分的選擇，還可以在其他地方負責評分的顯示。另外，元件的各種樣式也應該是可擴充的方面之一。
需要暴露的API
作為一個非UI元件，自然是有其需要承擔的功能性職責，這種時候就需要為其擬定相應的方法，有些方法是元件內部私有的，而有一些則應該暴露出來，讓父級能夠順利呼叫。以評級元件為例，作為父元件，在使用該評級元件是最關心的是什麼？沒錯，就是使用者是否點選了你，並且使用者點選了什麼評級。這就很明瞭了，我們在編寫元件時，應該在星星的點選事件上為父元件保留點選成功的響應。
handleSelectRate(value) {
if (!this.props.canClick) {
return
}
this.setState({
rateValue: value
})
// 點選成功後呼叫父元件傳入的方法
this.props.handleSelectRate && this.props.handleSelectRate(value)
}
複製程式碼小結&元件原始碼(不涉及業務)
這些也不是啥乾貨，只是在平時工作開發中總結的一些東西，希望大大們輕拍。無論是用什麼框架，元件應該都是繞不開的話題，如果能養成良好的元件開發思維，相信能讓我們的開發效率得到提升，同時也能為其他同事提供便利。
原始碼環節--Github傳送門
後話--為啥你敢把在用的元件原始碼直接丟出來？？因為...它真的就只能用來點選評分...