全文共1052字，预计学习时长5分钟
图源：unsplash
作为JavaScript库的三大主流框架之一，React.js可谓风靡全球，全世界的开发者和公司都在用它。Facebook开发了它，并于2013年5月开源。
React真正改变了构建单页应用的方式，hook是关键。hook于去年引入，使我们能够在处理状态时使用功能组件而不是类组件。除了内置hook，React还支持自定义hook。
想用自定义hook玩出花儿？那还不好说，往下看吧！
图源：unsplash
1. useFetch
useFetch能以描述性方法实现fetch。首先使用useState初始化响应和错误状态变量，然后使用useEffect异步调用fetch并更新状态，最后返回一个包含响应或者错误变量的对象。
它能帮你从星球大战API获取字符并呈现其名称：
2. useTimeout
有了这个hook，可以使用描述性方法实现setTimeout。首先创建一个带有回调和延迟的自定义hook，然后使用useRef为回调函数创建一个ref，最后两次使用useEffect。一次用于记忆上次回调，一次用于设置timeout和清理。
来看看定时器怎么做：
3. useClickInside
如果在wrapped components内部进行click事件，那么useClickInside是正确的选择。首先创建一个自定义hook，可以使用一个ref和一个回调来处理click事件；然后使用useEffect来追加和清理click事件；最后使用useRef为要click的组件创建一个ref，并将其传递给useClickInside。
4. useClickOutside
useClickOutside与useClickInside非常相似，但它负责在wrapped component外部而不是内部处理click事件。因此，再次创建一个自定义hook，可以使用一个ref和一个回调来处理click事件。然后使用useEffect来追加和清理click事件。最后使用useRef为组件创建一个ref，并将其传递给useClickOutside。
5. useInterval
如果想要以描述性方法实现setInterval，可以使用useInterval。
首先必须创建一个自定义hook，使用回调和延迟。然后使用useRef为回调创建一个ref。最后使用useEffect来记忆最新的回调，并设置间隔和清理。
笔者用它做了用于浏览器游戏的自定义资源计数器：
6. useComponentDidMount
这个hook体现了如何在安装组件后立即执行回调。对于第二个参数，只需使用带空数组的useEffect，在安装组件后立即执行一次提供的回调。
7. usePrevious
这是另一个可以在应用程序中使用的很棒的自定义hook。有了它，就可以存储props或者之前的状态。首先创建一个接受值的自定义hook。然后使用useRef为该值创建一个ref。最后使用useEffect来记忆最新的值。
下例展示了计数器的实现：
8. useComponentWillUnmount
useComponentWillUnmount与上例类似，但一旦卸载组件，将立即执行回调。因此，再次使用带有空数组的useEffect作为第二个参数，以便在清理之前执行提供的回调。
OMG！所有开发者，啥也不说了，用它！
留言 点赞 关注
我们一起分享AI学习与发展的干货
欢迎关注全平台AI垂类自媒体 “读芯术”
（添加小编微信：dxsxbb，加入读者圈，一起讨论最新鲜的人工智能科技哦～）
