【React】常用的自定义 hooks

自定义 hooks 或者第三方 hooks,抽离公共部分,复用代码。

修改页面标题

tsx 复制代码
import React, {useEffect} from 'react';

function useTitle(title) {
    useEffect(() => {
        document.title = title;
    }, []);
}

export default useTitle;

获取鼠标位置

tsx 复制代码
import React, {useEffect, useState} from 'react';

function useMouseMove() {
    const [x, setX] = useState(0)
    const [y, setY] = useState(0)

    const handleMouseMove = (event) => {
        setX(event.clientX)
        setY(event.clientY)
    }

    useEffect(() => {
        window.addEventListener('mousemove', handleMouseMove)
        return () => {
            window.removeEventListener('mousemove', handleMouseMove)
        }
    }, [x, y]);
    return {x, y};
}

export default useMouseMove;

异步获取数据

tsx 复制代码
import React, {useEffect, useState} from 'react';

function getInfo():Promise<string> {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(Date.now().toString())
        }, 1500)
    })
}

function useGetInfo() {
    const [loading, setLoading] = useState(true)
    const [info, setInfo] = useState('')
    useEffect(() => {
        getInfo().then(info => {
            setInfo(info)
            setLoading(false)
        })
    }, []);
    return { loading, info }
}

export default useGetInfo;
tsx 复制代码
import useTitle from "./hooks/useTitle.tsx";
import useMouseMove from "./hooks/useMouseMove.tsx";
import useGetInfo from "./hooks/useGetInfo.tsx";

function App() {

    useTitle('React Demo')

    const {x, y} = useMouseMove()
    const {loading, info} = useGetInfo()

    return (
        <>
            <h1>React Demo</h1>
            <div>鼠标位置:{x} {y}</div>
            <div>异步获取当前时间:{loading ? '加载中' : info}</div>
        </>
    )
}

export default App

第三方 hooks

常见的有 ahooks 或者 react-use。

ahooks - React Hooks Library - ahooks 3.0

https://github.com/streamich/react-use

我们上面的 hooks 几乎在这些第三方库中都可以找到。

Hooks 规则

  1. 命名规则:

    • Hook 必须 useXxx 格式来命名。
  2. 调用位置

    • 组件内部
    • 其他 Hook 内部

    组件外部,或一个普通函数中,不能调用 Hook

  3. 顺序一致

    Hook 必须是组件"第一层代码"

    • Hook 不可放在 if 等条件语句中 ( 或者前面有 return ,也算是条件 )
    • Hook 不可放在 for 等循环语句中
  4. 闭包陷阱

异步函数中获取 state 时,可能不是最新的 state 值。

解决方案:替换为 useRef ------ 但 ref 变化不会触发 rerender ,所以得结合 state 一起。详情见:【React】React Hooks-CSDN博客

相关推荐
东芃9394几秒前
uniapp上传blob对象到后台
前端·javascript·uni-app
梵得儿SHI14 分钟前
Java IO 流深度解析:对象流与序列化机制(ObjectInputStream/ObjectOutputStream)
java·开发语言·rpc·序列化·对象流·对象与字节流的转换·java对象流
想不明白的过度思考者15 分钟前
Rust——Tokio的多线程调度器架构:深入异步运行时的核心机制
开发语言·架构·rust·多线程
百炼成神 LV@菜哥16 分钟前
记类成员变量 vs 方法中的变量
java·开发语言
贝西奇谈23 分钟前
JavaScript DOM节点操作详解
开发语言·javascript·php
学习编程的Kitty30 分钟前
JavaEE初阶——多线程(4)线程安全
java·开发语言·jvm
刚子编程35 分钟前
ASP.NET Core Blazor 核心功能一:Blazor依赖注入与状态管理指南
开发语言·.netcore·blazor
海木漄1 小时前
C# 内存是绝对自动清理吗?
开发语言·c#
野老杂谈1 小时前
如何快速学习智能合约开发语言 Solidity
开发语言·学习·智能合约·solidity·以太坊·区块链开发
Han.miracle1 小时前
Java线程的学习—多线程(一)
java·开发语言·学习