前言

React Hooks的发布已经有三年多了，它给函数式组件带来了生命周期，现如今，Hooks逐渐取代class组件，相信各位 React 开发的小伙伴已经深有体会，然而你真的完全掌握hooks了吗？知道如何去做一个好的自定义hooks吗？

我们知道React Hooks有useState设置变量，useEffect副作用，useRef来获取元素的所有属性，还有useMemo、useCallback来做性能优化，当然还有一个自定义Hooks，来创造出你所想要的Hooks

接下来我们来看看以下几个问题，问问自己，是否全都知道：

• Hooks的由来是什么？
• useRef的高级用法是什么？
• useMemo 和 useCallback 是怎么做优化的？
• 一个好的自定义Hooks该如何设计？
• 如何做一个不需要useState就可以直接修改属性并刷新视图的自定义Hooks？
• 如何做一个可以监听任何事件的自定义Hooks？

如果你对以上问题有疑问，有好奇，那么这篇文章应该能够帮助到你～

本文将会以介绍自定义Hooks来解答上述问题，并结合 TS，ahooks中的钩子，以案列的形式去演示

注：这里讲解的自定义钩子可能会和 ahooks上的略有不同，不会考虑过多的情况，如果用于项目，建议直接使用ahooks上的钩子～