手把手教你写几个实用的 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进阶 」，一块儿学习成长！