前言
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
React Hooks实际就是函数组件解决没有state，生命周期，逻辑不能复用的一种技术方案。
写React Hooks前必读
硬性要求
1. 必须完整阅读一次React Hooks官方文档
英文文档地址: https://reactjs.org/docs/hooks-intro.html
中文文档地址: https://zh-hans.reactjs.org/docs/hooks-intro.html
其中重点必看hooks: useState、useReducer、useEffect、useCallback、useMemo
另外推荐阅读：
- Dan的《useEffect完全指南》
- 衍良同学的《React Hooks完全上手指南》
2. 工程必须引入lint插件，并开启相应规则
lint插件：https://www.npmjs.com/package/eslint-plugin-react-hooks
必开规则：
{
"plugins": ["react-hooks"],
"rules": {
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
}
}
其中，react-hooks/exhaustive-deps 至少warn，也可以是error。建议全新的工程直接配"error"，历史工程配"warn"。
切记，本条是硬性条件。
如果你的工程，当前没开启hooks lint rule，请不要编写任何hooks代码。如果你CR代码时，发现对方前端工程，没有开启相应规则，并且提交了hooks代码，请不要合并。该要求适应于任何一个React前端工程。
这两条规则会避免我们踩坑。虽然对于hooks新手，这个过程可能会比较“痛苦”。不过，如果你觉得这两个规则对你编写代码造成了困扰，那说明你还未完全掌握hooks。
如果对于某些场景，确实不需要「exhaustive-deps」，可在代码处加：
// eslint-disable-next-line react-hooks/exhaustive-deps
切记只能禁本处代码，不能偷懒把整个文件都禁了。
3. 如若有发现hooks相关lint导致的warning，不要全局autofix
除了hooks外，正常的lint基本不会改变代码逻辑，只是调整编写规范。但是hooks的lint规则不同，exhaustive-deps 的变化会导致代码逻辑发生变化，这极容易引发线上问题，所以对于hooks的waning，请不要做全局autofix操作。除非保证每处逻辑都做到了充分回归。
另外公司内部有个小姐姐补充道：eslint-plugin-react-hooks 从2.4.0版本开始，已经取消了 exhaustive-deps 的autofix。所以，请尽量升级工程的lint插件至最新版，减少出错风险。
然后建议开启vscode的「autofix on save」。未来无论是什么问题，能把error与warning 尽量遏制在最开始的开发阶段，保证自测跟测试时就是符合规则的代码。
硬性要求知识来源:
相学长《知乎-写React Hooks前必读》
Hook使用规则
- 只在最顶层使用 Hook, 不要在循环，条件或嵌套函数中调用 Hook。
- 只在 React 函数中调用 Hook, 不要在普通的 JavaScript 函数中调用 Hook。
详情请查阅官方文档 Hook 规则
常用Hooks
useState
声明状态变量 -- useState
作用: 为函数组件添加状态
import React, { useState } from 'react'
// 初始化及更新 state
// 1. 引入
// 2. 接受一个参数作为初始值
// 3. 返回一个数组, 第一个值为 状态, 第二个值为 修改状态的函数
function UseStateDemo() {
const [num, setNum] = useState(0)
return (
setNum(num => num + 1)}>
这里是UseStateDemo -- {num}
)
}
export default UseStateDemo
useEffect
解决副作用 -- useEffect
作用: 给没有生命周期的组件, 添加结束渲染的信号
useEffect 的执行时机是在 render 之后
相当于异步执行, 某些操作会产生页面闪烁(此时应该使用 useLayoutEffect)
import React, { useState, useEffect } from 'react'
// 参数一: 副作用函数
// 参数二: 依赖列表, 只有依赖更新时, 才会执行副作用函数
// 副作用函数内部可以返回一个函数, 当依赖更新时会先执行返回函数, 再执行副作用函数
function UseEffectDemo() {
const [age, setAge] = useState(18)
useEffect(() => {
console.log('effect执行了')
document.body.addEventListener('aaa', () => { console.log(123) })
return () => {
console.log('effect 里的return执行了')
document.body.removeEventListener('aaa', () => { console.log(456) })
}
}, [age])
return (
setAge(age => ++age)}>
这里是UseEffectDemo-- {age}
)
}
export default UseEffectDemo
useLayoutEffect
检测DOM -- useLayoutEffect
作用: dom 更新完成之后执行某个操作
useLayoutEffect 执行时机是在 dom 渲染/更新之后, 会阻塞dom的渲染, 相当于同步执行
useLayoutEffect 永远会优先于 useEffect 先执行
import React, { useState, useLayoutEffect } from 'react'
// 使用方式和 useEffect 相同, 不同点就是 渲染时机不同
function UseLayoutEffectDemo() {
const [count, setCount] = useState(0)
useLayoutEffect(() => {
// 尽量不要在这个位置绑定事件等, 使用 return 好像解绑不了对应事件
console.log('useLayoutEffect执行了')
return () => {
console.log('useLayoutEffect 的return执行了')
}
}, [count])
return (
setCount(count => count + 1)}>
这里是UseLayoutEffectDemo -- {count}
)
}
export default UseLayoutEffectDemo
useMemo
组件跟随状态更新 -- useMemo
相当于Vue的计算属性
作用: 让组件中的函数跟随状态更新
优化函数组件中的功能函数
注: useMemo 返回的是一个值
import React, { useState, useMemo } from 'react'
// 参数一: 功能函数
// 参数二: 依赖列表, 只有依赖更新时, 才执行功能函数
function UseMemoDemo() {
const [memo, setMemo] = useState(0)
const doubleMemo = useMemo(() => {
console.log('获取2倍的memo')
return 2 * memo
}, [memo])
return (
setMemo(memo => memo + 1)}>
这里是UseMemoDemo -- {doubleMemo}
)
}
export default UseMemoDemo
useCallback
组件跟随状态更新 -- useCallback
作用: 跟随状态更新执行
只有依赖项改变时才会执行
注: useCallback 返回的是一个函数
import React, { useState, useCallback, useEffect } from 'react'
// 使用方法和 useMemo 相似
// 不同点: useMemo 缓存的是一个值, useCallback 缓存的是一个函数
function UseCallbackDemo() {
const [num, setNum] = useState(0)
const doubelNum = useCallback(() => {
console.log('获取2倍num')
return 2 * num
}, [num])
return (
{ setNum(num => num + 1) }}>
这里是UseCallbackDemo -- {num}
useRef
长久保存数据 -- useRef
作用: 长期保存数据
返回一个子元素索引, 此索引在整个生命周期中保持不变
对象发生改变, 不通知。属性变更不重新渲染
import React, { useState, useRef, useEffect } from 'react'
function UseRefDemo() {
const [count, setCount] = useState(0)
const ref = useRef()
// 1. 保存一个值, 在整个生命周期中维持不变
// 2. 重新赋值 ref.current 不会触发组件/页面的重新渲染
useEffect(() => {
ref.current = setInterval(() => {
setCount(count => count + 1)
}, 500)
}, [])
useEffect(() => {
if (count > 10) {
console.log('count > 10, 计时器停止', ref.current)
clearInterval(ref.current)
}
}, [count])
return (
这里是UseRefDemo -- {count}
)
}
export default UseRefDemo
useContext
组件之间共享状态 -- useContext
作用: 在作用域内的组件实现数据共享
上层数据发生改变, 肯定会触发重新渲染
import React, { useState, useContext, createContext, useMemo } from 'react'
// 1. 需要引入 useContext createContext 两个内容
// 2. 通过 createContext 创建一个 Context 句柄
// 3. 使用 Context.Provider 来确定数据共享范围 (共享作用域)
// 4. 通过 value 来分发共享数据内容
// 5. 在子组件中, 通过 useContext(Context句柄) 来获取数据内容
const Context = createContext(null)
function UseContextDemo() {
const [data, setData] = useState([])
const [num, setNum] = useState(15)
const addData = () => {
const length = data.length || 0
const newData = [length].concat(data)
setData(newData)
}
const useData = useMemo(() => {
return {
data: data,
num: num
}
}, [data, num])
return (
这里是UseContextDemo -- data数据为 -- {data}
addData()}>下面是UseContextDemo的子组件, 点我修改数据
setNum(num => num + 1)}>点击num+1
)
}
function Child1() {
const data = useContext(Context)
return (
我是Child1 --- 共享数据为data: {data.data}
)
}
function Child2() {
const data = useContext(Context)
console.log(data)
return (
我是Child2 --- 共享数据为data: {data.data} --- num为: {data.num}
)
}
export default UseContextDemo
useReducer
复杂逻辑简单化 -- useReducer
redux 必须的内容
store 数据仓库 reducer 管理者
import React, { useReducer } from 'react'
// useReducer 使用方法
// 1. 需要创建 数据仓库 store 和 管理者 reducer
// 2. 通过 useReducer(reducer, store) 来获取 state 和 dispatch
const store = {
age: 25,
name: '张三'
}
const reducer = (state, action) => {
switch (action.type) {
case "changeAge":
return {
...state,
age: action.age
}
case "changeName":
return {
...state,
name: action.name
}
case "changeAll":
return {
...state,
name: action.name,
age: action.age
}
default:
return {
...state
}
}
}
function UseReducerDemo() {
const [state, dispatch] = useReducer(reducer, store)
return (
{
dispatch({
type: 'changeAge',
age: 50
})
}}>
这里是UserReducerDemo --- age: {state.age}
{
dispatch({
type: 'changeName',
name: '李四'
})
}}>
这里是UserReducerDemo --- name: {state.name}
{
dispatch({
type: 'changeAll',
name: '李四',
age: 211
})
}}>
这里是UserReducerDemo --- 修改 name 和 age
)
}
export default UseReducerDemo
自定义 Hooks
个性化解决方案 -- 自定义hooks
- 引入 React(好像是非必须的) 和自己需要的 hook
- 创建自己的 hook 函数
- 返回 hook 数据
- 将自定义的 hook 函数暴露出去
- 在自己的业务组件中, 引入并使用
自定义 hook 函数封装
// 自定义 useLocalData hook 函数
// util/useLocalData.js
import { useReducer } from 'react'
// 数据仓库
const store = {
age: 18
}
// 管理者
const reducer = (state, action) => {
switch (action.type) {
case 'changeAge':
return {
...state,
age: action.age
}
default:
return {
...state
}
}
}
function useLocalData() {
const [state, dispatch] = useReducer(reducer, store)
return [
state, dispatch
]
}
export default useLocalData
自定义 hook 函数调用
// MyHooks.js
import React from 'react'
import useLocalData from '../util/useLocalData'
function MyHooks() {
const [state, dispatch] = useLocalData()
return (
这里是自定义hooks
UserLocalData 中的 age --- {state.age}
{
dispatch({
type: 'changeAge',
age: 20
})
}}>修改age
)
}
export default MyHooks
总结
- 使用 Hooks 写起来比 class 写法舒服。
- 对 Hooks 需要熟练掌握，不然容易出现内存泄漏等问题
- 可以更好的抽离状态逻辑，更容易复用代码。