手把手教你写几个实用的-React-Hook

jiezi

5 年前

React Hooks 已经推出快一年了，改变了我们的开发方式，也收到了越来越多的开发者的喜爱。

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

一般处理时间懂，我们都会习惯性的用moment：

import moment from 'moment'

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

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

一般，我们一般也只是用到 格式化 这一个功能，所以可以自己简单的封装一个useTimer：

很实用。

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

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

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

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

这个 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 进阶」，一起学习成长！

背景