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

useEffect(()=>{
fetch(url)
.then((res)=> res.json())
.then((res)=> {
setData(res)
setStatus("fetched")
})
.catch(err=> setStatus("error"))
},[])

return {data, status}
}

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

if(status == "fetching"){
return (
loading...
)
}

if(status == "error" && !data){
return (
error while fetching the data
)
}

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