乐趣区

手把手教你写几个实用的-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

有时候我们需要获取 经纬度信息 ,比如实现 定位功能 ,每次单独写不是很 优雅,可以封装一下:

获取信息的过程是异步的,所以对外暴露了 isLoadingerror 两个属性,处理起来更加 灵活

这样就可以很方便的获取到我们需要的位置信息,很实用。

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 进阶」,一起学习成长!

退出移动版