弄懂自定义 Hooks 不难，改变开发认知有点不习惯

前言

我之前总结逻辑重用的时候，就一直在思考一个问题。

对于逻辑复用，render props 和 高阶组件都可以实现，同样官方说 Hooks 也可以实现，且还是在不增加额外的组件的情况下。

但是我在项目代码中，没有找到自定义 Hooks 的身影，自己也很少写。所以是为什么呢？

遇到问题表示查漏补缺的机会来了。

遇到技术点先问几个为什么

偶尔我会先问自己几个为什么，然后去寻找答案。带着明确的目标，不容易漏掉重要的讯息。

1.什么是自定义 Hooks?很难实现吗？
2.自定义 Hooks 和普通函数有什么区别？
3.如何创建一个自定义 Hook?
4.为什么需要自定义 Hooks？哪些场景会用到？
5.为什么我好像平时用不到？

自定义 Hooks 很难吗？

自定义 hooks可以看做是 React Hooks 的之外的自由延伸。本质上还是 JavaScript 函数。主要用途是实现逻辑重用。

React Hooks、函数、逻辑重用，根据这些关键字观察，实现自定义 Hooks 应该不是很难。

自定义 Hooks 和普通函数有什么区别？

看了关于自定义 Hooks 的介绍，我冒出来了第二个小问号：

这跟普通的逻辑复用函数有什么区别呢？

于是，我认真阅读了React的官方文档，发现主要有两点区分：

• 名字应该始终以 use 开头。
• 在自定义 Hook 中调用其他 Hook。

如何创建一个自定义 Hook?

因为Hook 本质是 JavaScript 函数，所以创建自定义 Hook其实就是声明一个名字以 use 开头的函数。

useDateRange

这个自定义 Hook 的过程算是意外惊喜，我在看完官方的例子之后，一直在想我实际开发中有哪些部分可以通过自定义 Hook实现逻辑的重用。

然后意外发现了项目中存在的可优化空间，后续会陆续产出优化的经验。

这里我先以项目中常出现的日期选择器为例，演示一下创建自定义 Hook 的全过程。

自定义 Hook 介绍

当前的需求如下：

• 日期选择器，需要设置可选日期范围，超出1天~10天的范围不可选择。