[JavaScript知识库] Hooks 进阶

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Hooks 进阶 -> 正文阅读

[JavaScript知识库]Hooks 进阶

useEffect 概念

useEffect 概念

useEffect 可以返回一个函数

这个函数称为清理函数，在此函数内用来执行清理相关的操作（例如事件解绑、清除定时器等）。

清理函数的执行时机

a，useEffect 的第 2 个参数不写，清理函数会在下一次副作用回调函数调用时以及组件卸载时执行，用于清除上一次或卸载前的副作用。

b，useEffect 的第 2 个参数为空数组，那么只会在组件卸载时会执行，相当于组件的?componetWillUnmount。

注意：一个 useEffect 只用来处理一个功能，有多个功能时，可以使用多个 useEffect。

?useEffect 发送请求

能够在函数组件中通过 useEffect 发送 AJAX 请求。

useEffect 是专门用来处理副作用的，所以发送请求这个副作用可以在 useEffect 回调内进行处理。

注意：useEffect 的回调只能是一个同步函数，即不能使用 async 进行修饰。

原因：如果 useEffect 的回调是异步的，此时返回值会被 Promise 化，这样的话就无法保证清理函数被立即调用。

若需要使用 async/await 语法，可以在 useEffect 回调内部再次创建 async 函数并调用。

?举例：
useEffect(() => {
    async function fetchMyAPI() {
        let url = 'http://something/' + productId
        const response = await myFetch(url)
    }

    fetchMyAPI()
}, [productId])

自定义 Hook

目的：复用状态逻辑。

自定义 Hook 是一个函数，规定函数名称必须以 use 开头，格式是?useXxx，React 内部会据此来区分是否是一个 Hook。

自定义 Hook 只能在函数组件或其他自定义 Hook 中使用，否则，会报错！

?举例如下：
import { useState, useEffect } from 'react'
export const useMouse = () => {
    const [pos, setPos] = useState({
        x: 0,
        y: 0,
    })
    useEffect(() => {
        const move = (e) => {
            setPos({
                x: e.pageX,
                y: e.pageY,
            })
        }
        document.addEventListener('mousemove', move)
        return () => {
            document.removeEventListener('mousemove', move)
        }
    }, [])
    return pos
}

useRef 操作 DOM?

能够使用 useRef 操作 DOM。

使用场景：DOM 操作或获取类组件的实例。

参数：在获取 DOM 时，一般都设置为 null。

返回值：返回一个带有 current 属性的对象，通过该对象就可以得到 DOM 对象或类组件实例。

useRef 获取 DOM有三个步骤
import { useState, useEffect } from 'react'
export const useMouse = () => {
    const [pos, setPos] = useState({
        x: 0,
        y: 0,
    })
    useEffect(() => {
        const move = (e) => {
            setPos({
                x: e.pageX,
                y: e.pageY,
            })
        }
        document.addEventListener('mousemove', move)
        return () => {
            document.removeEventListener('mousemove', move)
        }
    }, [])
    return pos
}
?也能用useRef 获取类组件实例，也能用这种特性进行父传子