06｜自定义Hooks ：四个典型的使用场景
王沛
你好，我是王沛。
我在开篇词就说过，要用好 React Hooks，很重要的一点，就是要能够从 Hooks 的角度去思考问题。要做到这一点其实也不难，就是在遇到一个功能开发的需求时，首先问自己一个问题：这个功能中的哪些逻辑可以抽出来成为独立的 Hooks？
这么问的目的，是为了让我们尽可能地把业务逻辑拆成独立的 Hooks ，这样有助于实现代码的模块化和解耦，同时也方便后面的维护。如果你基础篇的知识掌握得牢固的话，就会发现，这是因为 Hooks 有两个非常核心的优点：
一是方便进行逻辑复用；
二是帮助关注分离。
接下来我就通过一个案例，来带你认识什么是自定义 Hooks，以及如何创建。然后，我们再通过其它 3 个典型案例，来看看自定义 Hooks 具体有什么用，从而帮你掌握从 Hooks 角度去解决问题的思考方式。
如何创建自定义 Hooks？
自定义 Hooks 在形式上其实非常简单，就是声明一个名字以 use 开头的函数，比如 useCounter。这个函数在形式上和普通的 JavaScript 函数没有任何区别，你可以传递任意参数给这个 Hook，也可以返回任何值。
但是要注意，Hooks 和普通函数在语义上是有区别的，就在于函数中有没有用到其它 Hooks。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
自定义Hooks是React中非常重要的概念，它能够帮助开发者更好地利用Hooks的优势，从而实现代码的模块化和解耦。本文通过四个典型的使用场景生动地展示了自定义Hooks的实际应用。首先，通过一个简单的计数器案例展示了自定义Hooks的基本形式和优势。接着，针对封装通用逻辑的场景，以异步请求为例，展示了如何通过自定义Hooks实现通用逻辑的封装和重用，从而简化组件的逻辑复杂度。此外，文章还介绍了监听浏览器状态和拆分复杂组件的应用场景，并通过具体的代码示例展示了如何使用自定义Hooks来实现这些功能。通过这些案例，读者可以快速了解和掌握自定义Hooks的概念和实际应用，以及如何充分发挥Hooks的优势，使代码更加清晰、易于理解和维护。文章内容丰富，通过实际案例展示了自定义Hooks的灵活性和实用性，为读者提供了深入理解和应用该概念的指导。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《React Hooks 核心原理与实战》，新⼈⾸单¥59
《React Hooks 核心原理与实战》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(42)
- 最新
- 精选
Bug般的存在《拆分复杂组件》 这个例子，有种醍醐灌顶的感觉，豁然开朗，感谢-作者回复: 👍🏻
2021-06-0631
凡凡import { useState, useCallback } from 'react'; const useCounter = (step) => { const [counter, setCounter] = useState(0); const increment = useCallback(() => setCounter(counter + step), [counter, step]); const decrement = useCallback(() => setCounter(counter - step), [counter, step]); const reset = useCallback(() => setCounter(0), []); return {counter, increment, decrement, reset}; } export default useCounter;作者回复: 赞！Hooks 作为普通函数，是可以传递任何参数的。
2021-06-0516
江谢木老师，useMemo、useCallback对数据进行缓存时，依赖项是进行浅比较？ 如果存在依赖项是深层对象的数据发生变化会影响缓存计算结果？作者回复: 只是引用比较。只要引用没变，对象内部结构怎么变化都不会被认为依赖项变化了。所以 react 中都是用 immutable 的数据结构。
2021-08-1721
Tristan醍醐灌顶啊，敢问如何保养头发？作者回复: 祖传秘方，不可外传~
2021-07-291- Free fallconst useCounter = (initCount = 0) => { const [count, setCount] = useState(initCount) const increase = useCallback((body) => { setCount((count) => (count += body)) }, []) return [count, increase] }
作者回复: 不错，这样可以在调用方法的时候指定具体加几~
2021-06-051 
重生自定义hooks一般放在哪个文件夹下作者回复: 一般我会单独用一个 hooks 文件夹放自定义的 hooks。关于文件夹结构可以参考第10课哦！
2021-06-18
Isaac老师，自定义 hooks 必须要以 usexxx开头吗？作者回复: 是的。
2021-06-092
小个子外星人：）这节课超级棒！谢谢老师。努力在实践中，使用这节课的内容作者回复: 谢谢~
2021-06-08
满月import React, { useState, useCallback } from 'react'; function useCounter() { const [count, setCount] = useState(0); const increment = useCallback( (delta = 1) => setCount(count + delta), [count], ); const decrement = useCallback( (delta = 1) => setCount(count - delta), [count], ); const reset = useCallback(() => setCount(0), []); return { count, increment, decrement, reset, }; } export default function Counter() { // 调用自定义 Hook const { count, increment, decrement, reset } = useCounter(); // 渲染 UI return ( <div> <button onClick={() => decrement()}> - </button> <p>{count}</p> <button onClick={() => increment(2)}> + </button> <button onClick={reset}> reset </button> </div> ); }作者回复: 赞~ 也可以在 useCounter 的时候传参数。
2021-06-06- Geek_71adef请问如何区别 自定义hook是在usehook传参，还是在usehook里面的方法传参？
作者回复: 自定义的 useHooks 不一定返回一个方法，可能只是本身需要一些参数，场景是不一样的。
2021-06-06
收起评论