首页 > 其他分享> > Hooks 进阶

Hooks 进阶

2021-12-12 21:30:37 作者：互联网

useEffect 概念

自定义 Hook

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 获取类组件实例，也能用这种特性进行父传子

useRef多次渲染组件时进行数据共享

useRef：保证更新期间共用同一个 ref 对象（可以先理解为是一个全局变量）的同时，多个组件实例之间又不会相互影响（因为它是在组件内部的）。

useContext 使用

能够通过 useContext 实现跨级组件通讯。

作用：在函数组件中，获取 Context.Provider 提供的数据。

参数：Context 对象，即通过 createContext 函数创建的对象。

返回值：Context.Provider 提供的 value 数据。

标签：useRef,const,进阶,DOM,Hooks,组件,useEffect,函数
来源： https://blog.csdn.net/myazwj/article/details/121893423