React開發中解決公共代碼方案

公共代碼解決方案

今天主要談一下，react組件開發中對於多個組件中使用同一代碼段的解決方案，即公共代碼的提取方案

假設有這樣一個需求，有多個組件使用這樣一個功能，獲取學生列表

主要組件

學生組件

學生列表組件

模擬數據模塊

方案一：自定義Hook

組件結構

方案二：高階組件

組件結構

方案三：render Props

方案對比

其實高階組價、render Props都差很少，高階組件讓組件結構變得冗餘，而render Props也增長了多餘的render屬性，都是解決公共代碼的方案都不是最優；仔細想想，咱們平時解決公共代碼的方案都是經過抽離代碼、封裝函數，剛好，自定義Hook的方案，讓我實現了這一目的而且是使用常規思想解決，一切都是那麼天然；利用Hook的特色，分離關注點、讓每一個State Hook函數只維護本身的狀態，每一個Effect Hook函數只關注本身的反作用函數

結語

固然，提取公共代碼的方案還有不少，好比childern屬性（相似render Prop）、重寫Componet的生命週期componentDidMount方法等，大同小異，這裏就不作過多的贅述，React Hook出現大大優化的這種方案，強烈推薦！