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