[第24期] 手把手教你写几个实用的 React Hooks

背景

React Hooks 已经推出差不多1年了，改变了我们的开发方式，越来越多的人用到了实际的开发中。

我们平时也会自己写一些自定义的Hook， 下面我就分享几个比较实用的， 希望对你有所启发。

1. useTimer

讲一般我们处理时间都是用moment:

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

但是这个库体积还是比较大的：

一般我们也仅仅是用到时间格式化功能。

所以，如果不需要用moment的话， 可以封装一个：

简单实用。

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'),
})

只不过 usePrefetch 这种方式更加灵活， 可能更方便的组织到我们的业务代码之中。

合理使用这种方式， 积少成多，或许能有不错的优化效果。

代码内容也不多， 感兴趣的话可以照着写一下， 加深印象。

以上就是全部内容， 希望对你有所启发， 谢谢。