React自定义Hook创建指南：从基础到实战

作者头像东城·2026-01-31 23:27:03·
前言
在创建任何自定义Hook之前，我们首先需要理解什么是Hook以及为什么需要它们。建议先阅读我之前的博客文章来了解基础知识。
目录
创建我们的第一个自定义Hook
将可重用逻辑封装到自定义Hook中
创建一个真实场景的自定义Hook
我们学到了什么
创建我们的第一个自定义Hook
要创建我们的第一个自定义Hook，只需要创建一个以use前缀开头的简单JavaScript函数。这是大小写敏感的，所以必须严格按照这个格式书写。例如，可以命名为useFetch、useTodo或者useDelete，任何你能想到的名字都可以。要清楚你给它的名字，并且这个名字应该代表它在做什么。
  1. function useEvent(){
  2. useEffect(() => {
  3. console.log('effect')
  4. },[])
  5. }
javascript
就是这样简单！
将可重用逻辑封装到自定义Hook中
你可以通过在自定义Hook中封装在React应用程序中重复使用的相同逻辑来充分利用自定义Hook。例如，它可以是用于在应用程序中获取相同数据的fetch逻辑，也可以是用于获取当前主题状态（暗色或亮色或其他）的逻辑。
创建一个真实场景的自定义Hook
下面是一个fetch hook的示例，这是一个高级Hook可以处理的非常简单的实现。它在内部处理这些事情：
基于给定的url属性在初始挂载时获取数据
在数据获取过程中处理错误和加载状态
返回我们在App组件中使用的给定数据
  1. function useFetch(url: string){
  2. const [data, setData] = useState<any>(null)
  3. const [status, setStatus] = useState<"fetching"|"error"|"fetched">("fetching")

  5. useEffect(()=>{
  6. fetch(url)
  7. .then((res)=> res.json())
  8. .then((res)=> {
  9. setData(res)
  10. setStatus("fetched")
  11. })
  12. .catch(err=> setStatus("error"))
  13. },[])

  15. return {data, status}
  16. }

  18. function App(){
  19. const {data,status} = useFetch("https://fakestoreapi.com/products")

  21. if(status == "fetching"){
  22. return (
  23. loading...
  24. )
  25. }

  27. if(status == "error" && !data){
  28. return (
  29. error while fetching the data
  30. )
  31. }

  33. return (
  34. {JSON.stringify(data)}
  35. )
  36. }
javascript
我们学到了什么
使用Hook，你可以将大部分样板代码或逻辑提取到自定义Hook中，并在应用程序中使用这些Hook。
它帮助你编写DRY（Don't Repeat Yourself）代码
创建简单且容易
封装应用程序的通用逻辑
总结
自定义Hook是React中非常强大的功能，它们允许我们：
代码复用：将常用的逻辑提取到可重用的Hook中
关注点分离：将业务逻辑与UI组件分离
更好的可测试性：Hook可以独立测试
更清晰的组件：组件变得更加简洁和专注于渲染
通过遵循"use"前缀的命名约定，我们可以创建语义化的Hook名称，使代码更易读和维护。无论是处理API调用、状态管理还是副作用，自定义Hook都能帮助我们构建更优雅的React应用程序。