React Hooks 学习笔记

前言

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

另外推荐阅读：

  1. Dan的《useEffect完全指南》
  2. 衍良同学的《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"
  }
}

其中，<font color=#FF0000 >react-hooks/exhaustive-deps</font> 至少warn，也可以是error。建议全新的工程直接配"error"，历史工程配"warn"。

切记，本条是硬性条件。

如果你的工程，当前没开启hooks lint rule，请不要编写任何hooks代码。如果你CR代码时，发现对方前端工程，没有开启相应规则，并且提交了hooks代码，请不要合并。该要求适应于任何一个React前端工程。

这两条规则会避免我们踩坑。虽然对于hooks新手，这个过程可能会比较“痛苦”。不过，如果你觉得这两个规则对你编写代码造成了困扰，那说明你还未完全掌握hooks。

如果对于某些场景，确实不需要「exhaustive-deps」，可在代码处加：

<font color=#FF0000>// eslint-disable-next-line react-hooks/exhaustive-deps</font>

切记只能禁本处代码，不能偷懒把整个文件都禁了。

3. 如若有发现hooks相关lint导致的warning，不要全局autofix

除了hooks外，正常的lint基本不会改变代码逻辑，只是调整编写规范。但是hooks的lint规则不同，<font color=#FF0000>exhaustive-deps</font> 的变化会导致代码逻辑发生变化，这极容易引发线上问题，所以对于hooks的waning，请不要做全局autofix操作。除非保证每处逻辑都做到了充分回归。

另外公司内部有个小姐姐补充道：eslint-plugin-react-hooks 从2.4.0版本开始，已经取消了 exhaustive-deps 的autofix。所以，请尽量升级工程的lint插件至最新版，减少出错风险。

然后建议开启vscode的「autofix on save」。未来无论是什么问题，能把error与warning 尽量遏制在最开始的开发阶段，保证自测跟测试时就是符合规则的代码。

硬性要求知识来源:
相学长《知乎-写React Hooks前必读》

Hook使用规则

  1. 只在最顶层使用 Hook, 不要在循环，条件或嵌套函数中调用 Hook。
  2. 只在 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 (
        <div onClick={() => setNum(num => num + 1)}>
            这里是UseStateDemo -- {num}
        </div>
    )
}

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 (
        <div onClick={() => setAge(age => ++age)}>
            这里是UseEffectDemo-- {age}
        </div>
    )
}

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 (
        <div className="test" onClick={() => setCount(count => count + 1)}>
            这里是UseLayoutEffectDemo -- {count}
        </div>
    )
}

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 (
        <div onClick={() => setMemo(memo => memo + 1)}>
            这里是UseMemoDemo -- {doubleMemo}
        </div>
    )
}

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 (
        <div onClick={() => { setNum(num => num + 1) }}>
            这里是UseCallbackDemo -- {num}
            <Child callback={doubelNum}></Child>
        </div>
    )
}

function Child(props) {

    useEffect(() => {
        console.log('更新了')
    }, [props.callback])

    return (<>-- Child -- {props.callback()}</>)
}

export default UseCallbackDemo

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 (
        <div>
            这里是UseRefDemo -- {count}
        </div>
    )
}

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 (
        <div>
            这里是UseContextDemo -- data数据为 -- {data}
            <div className="fc-f79030" onClick={() => addData()}>下面是UseContextDemo的子组件, 点我修改数据</div>
            <div className="fc-f79030" onClick={() => setNum(num => num + 1)}>点击num+1</div>
            <div>
                <Context.Provider value={useData}>
                    <Child1 ></Child1>
                    <Child2></Child2>
                </Context.Provider>
            </div>
        </div>
    )
}

function Child1() {
    const data = useContext(Context)

    return (
        <div>
            我是Child1 --- 共享数据为data: {data.data}
        </div>
    )
}

function Child2() {
    const data = useContext(Context)
    console.log(data)
    return (
        <div>
            我是Child2 --- 共享数据为data: {data.data} --- num为: {data.num}
        </div>
    )
}

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 (
        <div>
            <div onClick={() => {
                dispatch({
                    type: 'changeAge',
                    age: 50
                })
            }}>
                这里是UserReducerDemo --- age: {state.age}
            </div>
            <div onClick={() => {
                dispatch({
                    type: 'changeName',
                    name: '李四'
                })
            }}>
                这里是UserReducerDemo --- name: {state.name}
            </div>
            <div onClick={() => {
                dispatch({
                    type: 'changeAll',
                    name: '李四',
                    age: 211
                })
            }}>
                这里是UserReducerDemo --- 修改 name 和 age
            </div>
        </div>
    )
}

export default UseReducerDemo

自定义 Hooks

个性化解决方案 -- 自定义hooks
  1. 引入 React(好像是非必须的) 和自己需要的 hook
  2. 创建自己的 hook 函数
  3. 返回 hook 数据
  4. 将自定义的 hook 函数暴露出去
  5. 在自己的业务组件中, 引入并使用

自定义 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 (
        <div>
            <div>这里是自定义hooks</div>
            <div>
                <div> UserLocalData 中的 age --- {state.age} </div>
                <div onClick={() => {
                    dispatch({
                        type: 'changeAge',
                        age: 20
                    })
                }}>修改age</div>
            </div>
        </div>
    )
}

export default MyHooks

总结

  1. 使用 Hooks 写起来比 class 写法舒服。
  2. 对 Hooks 需要熟练掌握，不然容易出现内存泄漏等问题
  3. 可以更好的抽离状态逻辑，更容易复用代码。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,294评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,493评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,790评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,595评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,718评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,906评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,053评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,797评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,250评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,388评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,018评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2赞 350

推荐阅读更多精彩内容

  • 2019－11－28 周四 阴
    今天感恩节哎，感谢一直在我身边的亲朋好友。感恩相遇！感恩不离不弃。 中午开了第一次的党会，身份的转变要...
    迷月闪星情阅读 10,559评论 0赞 11
  • 2019.11.28下午市电视台
    彩排完，天已黑
    刘凯书法阅读 4,199评论 1赞 3
  • 表情管理
    表情是什么，我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了，难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 124,506评论 2赞 7