手把手教你寫幾個實用的 React Hook

背景

React Hooks 已經推出快一年了，改變了咱們的開發方式，也收到了愈來愈多的開發者的喜好。

咱們平時在開發過程當中， 確定也會本身寫一些自定義的Hook， 下面我就分享4個比較實用的， 但願對你有所啓發。

正文

---

1. useTimer

通常處理時間懂， 咱們都會習慣性的用moment：

import moment from 'moment'

// ...
const timeRender = time => moment(time).format('HH:mm DD/MM/YYYY')
// ...

可是這個庫體積仍是比較大的：

通常， 咱們通常也只是用到格式化這一個功能， 因此能夠本身簡單的封裝一個useTimer：

很實用。

2. useInterval

這個功能也是挺常見的，每隔一段時間執行一次， 能夠用來實現倒計時等功能, 代碼：

3. useGeo

有時候咱們須要獲取經緯度信息， 好比實現定位功能， 每次單獨寫不是很優雅， 能夠封裝一下：

獲取信息的過程是異步的， 因此對外暴露了isLoading， error 兩個屬性，處理起來更加靈活。

這樣就能夠很方便的獲取到咱們須要的位置信息，很實用。

4. usePrefetch

這個Hook 能夠經過懶加載的方式過濾掉主模塊不須要的模塊, 幫助你減小加載的時間， 讓你的應用更快的呈現和響應。

好比， 咱們有一個頁面， 點擊按鈕以後出現一個彈窗。

不少時候， 咱們都是定義一個Modal 組件， 引入進來， 放到Render 函數裏， 用一些譬如Visible的屬性去控制。

好比：

import BigModal from './BigModal'

// ...

<BigModal 
  visible={false}
/>

在咱們點擊按鈕以前， 這個 modal 是咱們不須要的，也不須要渲染。

因此咱們能夠經過懶加載的方式來加載這個模塊，還能弄爲咱們的主模塊代碼體積瘦身，減小下載時間和scripting時間。

代碼以下：

這種方式和咱們熟知的loadable 也是十分相似的：

const SomeModule = loadable({
  loader: () => import('./SomeModule'),
})

只不過usePretch 這種方式更加靈活， 可能更方便的組織到咱們的業務代碼之中。

合理使用這種方式， 聚沙成塔，或許能有不錯的優化效果。

結語

上文推薦了幾個實用的Hook， 都是咱們平時工做中比較常見的，但願對你有所啓發。

文中的代碼美化生成工具是：

https://carbon.now.sh/

看起來更加方便， 代碼內容也很少， 感興趣的話能夠照着寫一下， 加深印象。

若是以爲內容有幫助能夠關注下個人公衆號 「 前端e進階 」，一塊兒學習成長！