概述

React Hooks 可以说是 React 最重要 的内容之一。常见的 React Hooks 命名 通常 以 use 开头，比如 useState、useEffect 等。
本文将采用图文详解的方式，带你快速了解：React 内置 Hooks、自定义 Hooks（复用代码）、第三方 Hooks 的使用。

---

一、内置 Hook——useState

1.1 响应式数据更新

import React, { useState } from 'react'function App() {// let count = 0  // 普通的 js 变量，无法触发组件的更新const [count, setCount] = useState(0) // useState 可以触发组件的更新function add() {setCount(count + 1)console.log(count, 'count')}return (<><div><button onClick={add}>add {count}</button></div></>)
}
export default App

1.2 什么是 state

• props 是父组件传递过来的信息
• state 是组件内部的状态信息，不对外
• state 变化，触发组件更新，重新渲染 rerender 页面

1.3 state 特点（一）——异步更新

• 写一个简单的累加方法，打印出来的 count 永远是累加之前的 count 。并非是同步更新

import React, { FC, useState } from 'react'const StateDemo: FC = () => {const [count, setCount] = useState(0) // useState 可以触发组件的更新const [name, setName] = useState('张三')function add() {// 写法一：setCount(count + 1)// 写法二：// setCount(count => count + 1)/** 打印出来的 count 永远是累加之前的 count */console.log(count, 'cur count') // 异步更新，无法直接拿到最新的 state 值 }return (<><button onClick={add}>add {count}</button></>)
}
export default StateDemo

• 如果说一个变量不用于 JSX 中显示，那就不要用 setState 来管理它，用 useRef

import React, { FC, useState } from 'react'const StateDemo: FC = () => {const [name, setName] = useState('张三')function add() {setName('李四')console.log(name) // 如果说一个变量不用于 JSX 中显示，那就不要用 setState 来管理它，用 useRef}
}
export default StateDemo

1.4 state 特点（二）——可能会被合并

import React, { FC, useState } from 'react'const StateDemo: FC = () => {const [count, setCount] = useState(0) // useState 可以触发组件的更新function add() {/** 方法一：看代码觉得可能会实现 count + 5，但由于是异步更新，每次执行的时候，count 任然是0。所以最后仍然是 count + 1 */setCount(count + 1)setCount(count + 1)setCount(count + 1)setCount(count + 1)setCount(count + 1)/** 方法二：可以实现 count + 5 */setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)setCount(count => count + 1)console.log(count, 'cur count')}return (<><div><button onClick={add}>add {count}</button></div></>)
}
export default StateDemo

1.5 state 特点（三）——不可变数据（重要！！！）

注：编辑 state 的数据只能是传入一个的数据进行覆盖，而不能修改原数据

import React, { FC, useState } from 'react'
import QuestionCard from './components/QuestionCard'const List2: FC = () => {// 问卷列表数据const [questionList, setQuestionList] = useState([{ id: 'q1', title: '问卷1', isPublished: false },{ id: 'q2', title: '问卷2', isPublished: true },{ id: 'q3', title: '问卷3', isPublished: true },{ id: 'q4', title: '问卷4', isPublished: false },])// 新增问卷function handleAdd() {// 生成三位随机数const r = Math.random().toString().slice(-3)setQuestionList(questionList.concat({id: 'q' + r,title: '问卷' + r,isPublished: false,}))}// 删除问卷function deleteQuestion(id: string) {setQuestionList(questionList.filter(item => item.id != id))}// 编辑问卷function publishedQuestion(id: string) {setQuestionList(questionList.map(item => {if (item.id !== id) return itemreturn {...item,isPublished: true,}}))}
}
export default List2

1.6 使用 immer 修改 state

• state 是不可变数据
• state 操作成本高，有很大不稳定性
• 使用 immer 可避免这一个问题

安装 immer

npm install immer --save

使用 immer

import React, { FC, useState } from 'react'
import { produce } from 'immer'const Demo: FC = () => {const [userInfo, setUserInfo] = useState({ name: '张三', age: 24 })// 修改个人信息const handleChangeUser = () => {setUserInfo(// 通过 immer，即可让我们便捷的修改数据produce(draft => {draft.name = '李四'}))}return (<div><div>{JSON.stringify(userInfo)}</div><button onClick={handleChangeUser}>change age</button></div>)
}
export default Demo

---

二、内置 Hook——useEffect

2.1 作用及使用

import React, { FC, useState, useEffect } from 'react'
import { produce } from 'immer'
import QuestionCard from './components/QuestionCard'const List2: FC = () => {/** 方式一：直接发起 Ajax 请求。不行，state值改变时会触发请求，造成重复发送冗余请求 */// console.log('方式一加载 Ajax 网络请求')/** 方式二：此方法即可 */useEffect(() => {console.log('方式二加载 Ajax 网络请求')}, []) // 第二个参数为依赖项， 数组中可以放多个 state 值，当 state 值改变时，会触发 函数(第一个参数)的执行。若为空，const [questionList, setQuestionList] = useState([{ id: 'q1', title: '问卷1', isPublished: false },{ id: 'q2', title: '问卷2', isPublished: true },{ id: 'q3', title: '问卷3', isPublished: true },{ id: 'q4', title: '问卷4', isPublished: false },])
}
export default List2

2.2 执行时机

组件创建、销毁以及依赖的 state 数据改变时，会执行

import React, { FC, useState, useEffect } from 'react'
import { produce } from 'immer'
import QuestionCard from './components/QuestionCard'const List2: FC = () => {/** 方式一：直接发起 Ajax 请求。不行，会频繁的重复请求 */// console.log('方式一加载 Ajax 网络请求')/** 方式二：此方法即可 */useEffect(() => {// 组件挂载时执行console.log('component mounted')return () => {// 组件销毁时执行console.log('component unmounted')}}, [questionList]) // 如果此数组中依赖数据，则依赖数据更新时会执行const [questionList, setQuestionList] = useState([{ id: 'q1', title: '问卷1', isPublished: false },{ id: 'q2', title: '问卷2', isPublished: true },])
}
export default List2

2.3 useEffect 执行两次

• React18 开始，useEffect 在开发环境下会执行两次
• 目的是模拟左键创建、销毁、再创建的完整流程、及早暴露问题
• 生产环境下会执行一次

---

三、其他内置 Hooks

3.1 useRef —— 用于Dom节点，用于JS变量

• 一般用于操作 DOM
• 也可以传入普通的 JS 变量，但更新不会触发 rerender
• 要和 Vue3 ref 区分开（如果你用过 Vue3）

示例代码一：操作 DOM

import React, { FC, useRef } from 'react'const UseRefDemo: FC = () => {const inputRef = useRef<HTMLInputElement>(null)function handelSelect() {const element = inputRef.current  // 可以拿到 DOM 节点，进行 DOM 操作element?.select()}return (<div><input ref={inputRef} defaultValue="Hello Word" /><button onClick={handelSelect}>select button</button></div>)
}
export default UseRefDemo

示例代码二：不会触发 rerender

import React, { FC, useRef } from 'react'const UseRefDemo: FC = () => {const name = useRef('张三')function handleChangeName() {name.current = '王小虎' // 修改 ref 的值，不会触发 rerender(修改 state 的值，会触发 rerender)console.log(name.current, 'now name') // 此时页面仍然是 张三，但是此处打印出来的是 王小虎}return (<div><div>{name.current}</div><button onClick={handleChangeName}>select button</button></div>)
}
export default UseRefDemo

3.2 useMemo —— 缓存变量

• 函数组件，每次 state 更新都会重新执行函数
• useMemo 可以缓存数据，不用每次执行函数都重新生成
• 可用于计算量较大的场景，缓存提高性能

使用示例代码：

import React, { FC, useMemo, useState } from 'react'const Demo: FC = () => {const [num1, setNum1] = useState(10)const [num2, setNum2] = useState(20)const [test, setTest] = useState('测试')  // 更新组件，导致组件 rerenderconst sum = useMemo(() => {return num1 + num2}, [num1, num2])return (<><p> {sum} </p><p> {num1}{' '}<button onClick={() => { setNum1(num1 + 1) }}>add num1</button></p><p> {num2}{' '} <button onClick={() => {setNum2(num2 + 2)}}>add num2</button></p><div>{/* form组件，受控组件 */}<input value={test} onChange={e => setTest(e.target.value)} /></div></>)
}
export default Demo

3.3 useCallback—— 缓存函数

• 和 useMemo 作用类似
• 专门用于 **缓存函数 **
• 使用时根据业务而定，不能为了优化二优化

import React, { FC, useState, useCallback } from 'react'const Demo: FC = () => {const [text, setText] = useState('Hello')// fn1 是只要组件重新更新、重新执行，那么 fn1 就会被重新定义 -- 无缓存const fn1 = () => console.log('执行 fn1 ')// fn2 用了 useCallback ,就会根据依赖项去重新定义 -- 有缓存const fn2 = useCallback(() => {console.log('执行 fn2')}, [text]) // 依赖项，与 useEffect,useMemo,useCallback 用法类似// 缓存，为了性能优化，提升时间效率// 但是不能为了优化，要根据业务而定return (<><div><button onClick={fn1}>fn 1</button> &nbsp; <button onClick={fn2}>fn 2</button></div>{/* form组件，受控组件 */}<input value={text} onChange={e => setText(e.target.value)} /></>)
}
export default Demo

---

四、自定义 Hook

4.1 React Hooks 的正确打开方式

• 内置 Hooks 保证基础功能
• 内置 Hooks 灵活配合，实现业务功能
• 抽离功能部分，自定义 Hooks 或者第三方 Hooks —— 复用嗲马

4.2 React 组件公共逻辑的抽离和复用

• 之前是 class 组件，现在是函数组件
• class 组件：Mixin（混合）、 HOC（高阶组件）、 render-props（渲染属性） 来复用公共逻辑
• 函数组件：使用 Hooks —— 当前最完美的解决方案，Vue3也在参考

4.3 自定义 Hook —— 修改网页标题

4.3.1 定一个 hooks

// /src/hooks/useTitle.ts
import { useEffect } from 'react'function useTitle(title: string) {useEffect(() => {// 修改网页标题document.title = title}, [])
}
export default useTitle

4.3.2 使用 自定义 hooks

import React from 'react'
// 引入 自定的 hooks
import useTitle from './hooks/useTitle'function App() {... 其他代码// 使用自定义的 hooksuseTitle('React 自定义 Hook 学习')... 其他代码
}
export default App

4.3.3 页面效果

---

五、第三方 Hooks

5.1 常见的第三方 Hooks

• ahooks – 国内常用 官网地址：https://ahooks.js.org/
• react-use – 国外常用

5.2 ahooks 的使用

安装 ahooks

npm install --save ahooks

使用

import React from 'react';
import { useTitle } from 'ahooks';export default () => {useTitle('Page Title');return (<div><p>Set title of the page.</p></div>);
};

---

六、Hooks 使用规则

• 必须用 useXxx 格式来命名
• 只能在两个地方调用 Hook （*组件内、其他 Hook 内 *）
• 必须保证每次调用顺序一致（不能将 Hook 放在 if for 内部）