React Hooks 系列之8 custom Hook

CS_Joe 创作等级LV.4
React Hooks 系列之8 custom Hook

本系列将讲述 React Hooks 的使用方法，从 useState 开始，将包含如下内容：

掌握 React Hooks api 将更好的帮助你在工作中使用，对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示，非常易于初学者和复习使用。

截至目前，学习了官方的这么多 hooks api，我们也可以创造一些自己的 hooks，甚至官方也在鼓励开发者将组件逻辑抽象到自定义 hooks 中，方便复用。

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

useDocumentTitle 示例

function 普通写法

我们想创建一个计数器，计数器的值改变后，希望改变页面的 Title

DocTitleOne.tsx

import React, { useState, useEffect } from 'react'

function DocTitleOne() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `Count - ${count}`
  }, [count])
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >Count - {count}</button>
    </div>
  )
}

export default DocTitleOne

复制代码

App.tsx

import React from 'react'
import './App.css'

import DocTitleOne from './components/31DocTitleOne'

const App = () => {
  return (
    <div className="App">
      <DocTitleOne />
    </div>
  )
}

export default App
复制代码

页面展示如下

运行没有问题，接下来又有一个需求的增量，就是页面要在另一个组件中也能改变页面的 Title，接下来我们创建一个新的组件。

DocTitleTwo.tsx

import React, { useState, useEffect } from 'react'

function DocTitleTwo() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    document.title = `Count - ${count}`
  }, [count])
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >Count - {count}</button>
    </div>
  )
}

export default DocTitleTwo
复制代码

App.tsx

import React from 'react'
import './App.css'

import DocTitleOne from './components/31DocTitleOne'
import DocTitleTwo from './components/31DocTitleTwo'

const App = () => {
  return (
    <div className="App">
      <DocTitleOne />
      <DocTitleTwo />
    </div>
  )
}

export default App
复制代码

页面展示如下

回顾代码，DocTitleTwo 显然重复了 DocTitleOne 的代码，设想一下如果有 10 个组件都要修改页面 title 的话，你肯定不想重复这些代码。这时就需要自定义 Hook 了。

这个示例中，我们可以创建一个自定义 Hook 来设置页面的 title。然后使用这个自定义 Hook 在不同的组件中。

抽象出 useDocumentTitle hook

useDocumentTitle.tsx

import { useEffect } from 'react'

function useDocumentTitle(count: number) {
  useEffect(() => {
    document.title = `Count - ${count}`
  }, [count])
}

export default useDocumentTitle
复制代码

DocTitleOne.tsx

import React, { useState } from 'react'
import useDocumentTitle from './hooks/useDocumentTitle'

function DocTitleOne() {
  const [count, setCount] = useState(0)
  useDocumentTitle(count)
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >Count - {count}</button>
    </div>
  )
}

export default DocTitleOne
复制代码

DocTitleTwo.tsx

import React, { useState } from 'react'
import useDocumentTitle from './hooks/useDocumentTitle'

function DocTitleTwo() {
  const [count, setCount] = useState(0)
  useDocumentTitle(count)
  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1)
        }}
      >Count - {count}</button>
    </div>
  )
}

export default DocTitleTwo
复制代码

App.tsx

import React from 'react'
import './App.css'

import DocTitleOne from './components/31DocTitleOne'
import DocTitleTwo from './components/31DocTitleTwo'

const App = () => {
  return (
    <div className="App">
      <DocTitleOne />
      <DocTitleTwo />
    </div>
  )
}

export default App
复制代码

页面展示如下

我们回顾一下代码

在 DocTitleOne 中，引入了我们定义的 useDocumentTitle，传入了 count 这个状态的值。useDocumentTitle 中执行代码，将页面title 初始值设置为 0，然后继续渲染 DocTitleOne jsx 部分。点击按钮时，count 变为 1，触发了 DocTitleOne 的 rerender，useDocumentTitle 中入参也变为了 1，将页面 title 变为 1。

useCounter 示例

冗余的写法

CounterOne.tsx

import React, {useState} from 'react'

function CounterOne() {
  const [count, setCount] = useState(0)
  const increment = () => {
    setCount(prevCount => prevCount + 1)
  }
  const decrement = () => {
    setCount(prevCount => prevCount - 1)
  }
  const reset = () => {
    setCount(0)
  }
  return (
    <div>
      <h2>Count - {count}</h2>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

export default CounterOne
复制代码

CounterTwo.tsx

import React, {useState} from 'react'

function CounterTwo() {
  const [count, setCount] = useState(0)
  const increment = () => {
    setCount(prevCount => prevCount + 1)
  }
  const decrement = () => {
    setCount(prevCount => prevCount - 1)
  }
  const reset = () => {
    setCount(0)
  }
  return (
    <div>
      <h2>Count - {count}</h2>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

export default CounterTwo
复制代码

App.tsx

import React from 'react'
import './App.css'
import CounterOne from './components/32CounterOne'
import CounterTwo from './components/32CounterTwo'

const App = () => {
  return (
    <div className="App">
      <CounterOne />
      <CounterTwo />
    </div>
  )
}

export default App
复制代码

页面展示如下

相同的问题，我们有大量重复代码，接下来我们来看如何使用自定义 hook 来进行优化。

useCounter 抽象

useCounter.tsx

import { useState } from 'react'

function useCounter() {
  const [count, setCount] = useState(0)
  const increment = () => {
    setCount(prevCount => prevCount + 1)
  }
  const decrement = () => {
    setCount(prevCount => prevCount - 1)
  }
  const reset = () => {
    setCount(0)
  }
  return [count, increment, decrement, reset]
}

export default useCounter
复制代码

CounterOne.tsx

import React from 'react'
import useCounter from './hooks/useCounter'

function CounterOne() {
  const [count, increment, decrement, reset] = useCounter()
  return (
    <div>
      <h2>Count - {count}</h2>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

export default CounterOne
复制代码

CounterTwo.tsx

import React from 'react'
import useCounter from './hooks/useCounter'

function CounterTwo() {
  const [count, increment, decrement, reset] = useCounter()
  return (
    <div>
      <h2>Count - {count}</h2>
      <button onClick={increment}>increment</button>
      <button onClick={decrement}>decrement</button>
      <button onClick={reset}>reset</button>
    </div>
  )
}

export default CounterTwo
复制代码

App.tsx

import React from 'react'
import './App.css'
import CounterOne from './components/32CounterOne'
import CounterTwo from './components/32CounterTwo'

const App = () => {
  return (
    <div className="App">
      <CounterOne />
      <CounterTwo />
    </div>
  )
}

export default App
复制代码

页面展示依然如下

可以看到目前我们的代码结构就比较好了，我们还可以在 useCounter 中给 counter 设置初始值，如下

useCounter.tsx

import { useState } from 'react'

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  const increment = () => {
    setCount(prevCount => prevCount + 1)
  }
  const decrement = () => {
    setCount(prevCount => prevCount - 1)
  }
  const reset = () => {
    setCount(initialValue)
  }
  return [count, increment, decrement, reset]
}

export default useCounter
复制代码

使用时，对应的可以传入初始值

const [count, increment, decrement, reset] = useCounter(10)
复制代码

我们还可以修改每次增加或减少的数字，如下

import { useState } from 'react'

function useCounter(initialValue = 0, value = 1) {
  const [count, setCount] = useState(initialValue)
  const increment = () => {
    setCount(prevCount => prevCount + value)
  }
  const decrement = () => {
    setCount(prevCount => prevCount - value)
  }
  const reset = () => {
    setCount(initialValue)
  }
  return [count, increment, decrement, reset]
}

export default useCounter
复制代码

使用时，对应的也可以增加入参

const [count, increment, decrement, reset] = useCounter(10, 5)
复制代码

useInput 示例

示例是一个简单表单，用户可以填写姓名

function 普通写法

UserForm.tsx

import React, { useState, FormEvent } from 'react'

function UserForm() {
  const [firstName, setFirstName] = useState('')
  const [lastName, setLastName] = useState('')
  const submitHandler = (e: FormEvent) => {
    e.preventDefault()
    console.log(`Hello ${firstName} ${lastName}`)
  }
  return (
    <div>
      <form onSubmit={submitHandler}>
        <div>
          <label htmlFor="">First name</label>
          <input
            type="text"
            value={firstName}
            onChange={(e) => {
              setFirstName(e.target.value)
            }}
          />
        </div>
        <div>
          <label htmlFor="">Last name</label>
          <input
            type="text"
            value={lastName}
            onChange={(e) => {
              setLastName(e.target.value)
            }}
          />
        </div>
        <button>submit</button>
      </form>
    </div>
  )
}

export default UserForm
复制代码

App.tsx

import React from 'react'
import './App.css'

import UserForm from './components/33UserForm'

const App = () => {
  return (
    <div className="App">
      <UserForm />
    </div>
  )
}

export default App
复制代码

抽象出 useInput hook

useInput.tsx

import { useState } from 'react'

function useInput(initialValue: string) {
  const [value, setValue] = useState(initialValue)
  const reset = () => {
    setValue(initialValue)
  }
  const bind = {
    value,
    onChange(e: any) {
      setValue(e.target.value)
    }
  }
  return [value, bind, reset]
}

export default useInput
复制代码

UserForm.tsx

import React, { FormEvent } from 'react'
import useInput from './hooks/useInput'

function UserForm() {

  const [firstName, bindFirstName, resetFirstName] = useInput('')
  const [lastName, bindLastName, resetLastName] = useInput('')

  const submitHandler = (e: FormEvent) => {
    e.preventDefault()
    console.log(`Hello ${firstName} ${lastName}`)
    // @ts-ignore
    resetFirstName()
    // @ts-ignore
    resetLastName()
  }
  return (
    <div>
      <form onSubmit={submitHandler}>
        <div>
          <label htmlFor="">First name</label>
          <input
            type="text"
            {...bindFirstName}
          />
        </div>
        <div>
          <label htmlFor="">Last name</label>
          <input
            type="text"
            {...bindLastName}
          />
        </div>
        <button>submit</button>
      </form>
    </div>
  )
}

export default UserForm
复制代码

页面展示

小结

本章我们主要学习了自定义 Hook，举了 3 个例子，帮助我们学习抽象与复用代码。社区上还有很多人写了自己的自定义 Hook，大家也可以前去学习。也鼓励大家创造一些自己的自定义 Hook。

至此，本系列完结。祝一切顺利，大家都能学到东西。

分类：
前端
相关推荐
  • sincenir
    2小时前
    React.js Vue.js JavaScript
    跨域了？别着急，手把手带你从问题调研到解决！-- 文件上传跨域问题（OSS）
    本来是不准备写跨域这种老问题，但他们的跨域写的太烂了，实在是看不来，就让我来为掘金生态的丰富奉献一份力量吧~
    • 169
    • 评论
    跨域了？别着急，手把手带你从问题调研到解决！-- 文件上传跨域问题（OSS）
  • 我不是外星人
    1天前
    JavaScript React.js 程序员
    我的书出版了—致平庸的我和奋斗的青葱岁月
    《在山的那边》 在初中的时候，都学过一首诗词《在山的那边》，里面有这么一段话： “小时候，我常伏在窗口痴想—— 山那边是什么呢？ 妈妈给我说过：海 哦，山那边是海吗？ 于是，怀着一种隐秘的想望 有一天
    • 2212
    • 77
  • 强生
    2天前
    前端 JavaScript React.js
    37 岁老码农写的脚手架生成工具，两年赚了 10 几万美元
    本期案例 Divjoy 的作者 Gabe 与前几个案例的作者不同，他并没有每隔一段时间都公开他的销售数据，他只在产品上线前期阶段有公布。所以我也就只能从不同渠道去了解；目前公开的数据，截止至 2021
    • 3799
    • 12
    37 岁老码农写的脚手架生成工具，两年赚了 10 几万美元
  • 魔术师卡颂
    5天前
    前端 JavaScript React.js
    不数不知道，React已经有22个hook了
    大家好，我卡颂。 5月30日刚好是React10周年纪念日。 我顺手拉了下React最新代码，这一看不要紧，居然已经有22个hook了。 其中： react包导出了21个 react-dom包导出了1
    • 8990
    • 12
    不数不知道，React已经有22个hook了
  • Jay丶
    16天前
    前端 React.js JavaScript
    React18+Vite4+Zustand4 后台管理系统搭建🎉
    一个管理系统而已不是有手就行，要不是人手不够，后端也能做。看吧，前端就是这么人微言轻~ 该干的活还是得干！
    • 3.2w
    • 153
    React18+Vite4+Zustand4 后台管理系统搭建🎉
  • Veev
    15天前
    Vue.js React.js 前端框架
    连尤大都要借鉴的开源项目也会有一些迷惑行为
    我们知道 Vue 最近准备要推出新模式，什么新模式呢？Vapor Mode! 直译过来就是水蒸气模式，那什么又是水蒸气模式呢？其实就是无虚拟 DOM 模式。该模式是从 Solid.js 那边借鉴过来…
    • 1.6w
    • 48
    连尤大都要借鉴的开源项目也会有一些迷惑行为
  • timewilltell
    1天前
    Node.js TypeScript React.js
    使用Nextjs快速开发全栈导航网站
    本文以简单的导航网站举例，结合Next.js、Prisma、NextAuth、shadcn/ui来学习如何构建全栈应用
    • 538
    • 评论
    使用Nextjs快速开发全栈导航网站
  • HOHO
    18小时前
    前端 React.js
    学会使用 react hook，从转变心智模型开始
    在 react hook 出现之后，我们经常会听到"不好用是因为心智模型不对"的言论。 但是很少有人会讲这个所谓心智模型是什么，本文就来盘一盘这个心智模型，让你对 react hook 理解更加深刻。
    • 285
    • 1
  • superZidan
    29天前
    JavaScript React.js 音视频开发
    基于 React Flow 与 Web Audio API 的音频应用开发
    今天我们来学习通过 React Flow 和 Web Audio API 来创建一个可交互的语音广场
    • 6.7w
    • 99
    基于 React Flow 与 Web Audio API 的音频应用开发
  • 萌萌哒草头将军
    2天前
    React.js JavaScript 前端
    💡我居然用错了useMemo和useCallback这么久？
    我们知道，useMemo和useCallback主要作用是缓存中间状态，减少无意义的的render从而提高性能。但是最近我发现我对它们的使用一直有误解！
    • 1805
    • 24
    💡我居然用错了useMemo和useCallback这么久？
  • 沐洒
    17天前
    前端 React.js 代码规范
    能把队友气死的8种屎山代码(React版)
    前几天在前端技术群里聊起Code Review的事，大伙儿似乎都憋了一肚子气： 我觉得这份难言之隐应该要让更多人看到……
    • 2.3w
    • 189
    能把队友气死的8种屎山代码(React版)
  • 无双_Joney
    2天前
    Node.js 前端 React.js
    使用NestJs 构建的SSR 混合渲染方案(重构篇)
    NestJs是一个高效、可扩展的Node.js框架。SSR（服务器端渲染）可提高页面加载速度和搜索引擎排名。使用NestJs构建的SSR混合渲染方案结合了两者优势。为进一步优化SEO，可考虑丰富页面内
    • 1076
    • 评论
    使用NestJs 构建的SSR 混合渲染方案(重构篇)
  • 萌萌哒草头将军
    1天前
    React.js 前端 JavaScript
    🎉干货满满，React设计原理：藏在React源码里的五指山（一）🎉
    最近在努力研究React源码，发现它并没有我之前想象的那么难理解。 虽然源码里面有一些概念就像一座五指山困住了桀骜不驯的孙悟空。 但如果你理解了下面的几个概念，读懂react源码就不是难事了。
    • 424
    • 4
    🎉干货满满，React设计原理：藏在React源码里的五指山（一）🎉
  • 西南以北
    20小时前
    前端 React.js
    react的hook及案例
    hooks案例，包含useDebugValue/useDeferredValue/useId/useInsertionEffect/useLayoutEffe/useSyncExternalStore
    • 148
    • 1
    react的hook及案例
  • 拳打南山敬老院
    18小时前
    JavaScript React.js
    使用jsx来编写模板
    前言 模板引擎这个应该都不陌生，最早可以追溯到前后端还没分离的时候，后端为了循环、判断值之类简化编写流程而使用的，毕竟手动拼接字符串之类的也太麻烦了。 下面是 php easytpl 的一个示例，从这
    • 256
    • 评论
  • 躺平的前端
    18小时前
    React.js 前端 JavaScript
    浅谈react的useState
    了解一个框架的最好方式，便是从它的数据开始，无论是vue，亦或者react，都是如此。对于react来说，最重要的数据莫过于状态值state。
    • 137
    • 评论
    浅谈react的useState
  • 沐华
    10天前
    前端 Vue.js React.js
    【由浅到深】聊聊 Vue 和 React 的区别，看看你在哪个段位
    大家好，我是沐华。我发现很多5年以上前端，简历上写的基本都是熟练使用 Vue2、Vue3、React 并阅读源码对其实现原理有自己的理解，实际问起来却不免让人唏嘘
    • 6173
    • 37
    【由浅到深】聊聊 Vue 和 React 的区别，看看你在哪个段位
  • 我搁这敲代码呢
    3天前
    TypeScript React.js 前端
    前端项目中如何实现富文本编辑功能（含源码）
    前端项目中如何实现富文本编辑功能（含代码） 项目地址 一、安装 项目需要安装两个包：一个是基础包，另一个是组件包（组件包支持vue2、vue3、react）； 因为开源项目使用的是react技术栈，所
    • 548
    • 1
    前端项目中如何实现富文本编辑功能（含源码）
  • _island
    1天前
    前端 JavaScript React.js
    优雅地使用Echarts：探索基于Hooks的数据可视化方案
    哈喽！当echarts遇到react-hooks时又会是怎么样呢，今天将来探讨在react项目中如何更加优雅的使用echarts，让你在开发项目时更加如鱼得水！
    • 195
    • 评论
    优雅地使用Echarts：探索基于Hooks的数据可视化方案
  • CUGGZ
    5天前
    前端 React.js Vue.js
    探索主流前端框架的响应式原理！
    本文将探索在各个前端框架中响应式是如何工作的并比较这些框架的不同之处以更好地理解它们。 前置准备 响应式 响应式可以被广义地定义为应用状态变化时自动更新UI。作为开发者，我们只需要关注应用的状态，并让
    • 1116
    • 评论

    • 友情链接：

    CS_Joe 创作等级LV.4
    前端 | 动画 | Three.js
    私信
    获得点赞
    文章被阅读
    相关文章
    React Hooks 系列之3 useContext
    105点赞
     · 
    22评论
    React Hooks 系列之4 useReducer
    111点赞
     · 
    25评论
    React Hooks 系列之1 useState
    29点赞
     · 
    3评论
    JavaScript 中的表示任意精度的 BigInt
    17点赞
     · 
    0评论
    React Hooks 系列之6 useMemo
    20点赞
     · 
    3评论