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

背景

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

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

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

代码语言：javascript复制

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

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

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

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

简单实用。

这个功能也是挺常见的，每隔一段时间执行一次，可以用来实现倒计时等功能, 代码：

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

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

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

这个Hook 可以通过懒加载的方式过滤掉主模块不需要的模块, 帮助你减少加载的时间，让你的应用更快的呈现和响应。

比如，我们有一个页面，点击按钮之后出现一个弹窗。

很多时候，我们都是定义一个Modal 组件，引入进来，放到 Render 函数里，用一些譬如Visible的属性去控制。

比如：

代码语言：javascript复制

import BigModal from './BigModal'

// ...
<BigModal
  visible={false}
/>

在我们点击按钮之前，这个 modal 是我们不需要的，也不需要渲染。

所以我们可以通过懒加载的方式来加载这个模块，还能弄为我们的主模块代码体积瘦身，减少下载时间和scripting时间。

代码如下：

这种方式和我们熟知的loadable 也是十分类似的：

代码语言：javascript复制

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

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

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

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

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

0 人点赞