通过自定义 Hook,可以将组件逻辑提取到可重用的函数中,在 Hook 特性之前,React 中有两种流行的方式来共享组件之间的状态逻辑:render props和高阶组件,但此类解决方案会导致组件树的层级冗余等问题。而自定义 Hook 的使用可以很好的解决此类问题
创建自定义 Hook:
自定义 Hook 是一个函数,其名称以 “use
” 开头,函数内部可以调用其他的 Hook。以下就是实时获取鼠标位置的自定义 Hook 实现:
import { useEffect, useState } from "react"export const useMouse = () => {const [position, setPosition] = useState({x: null,y: null});useEffect(() => {const moveHandler = (e) => {setPosition({x: e.screenX,y: e.screenY});};document.addEventListener('mousemove', moveHandler);return () => {document.removeEventListener('mousemove', moveHandler);};}, []);return position;
}
使用自定义 Hook:
自定义 Hook 的使用规则与 Hook 使用规则基本一致,以下是 useMouse
自定义 Hook 的使用过程:
import React from 'react';
import { useMouse } from '../hooks/useMouse';export default function MouseMove() {const { x, y } = useMouse();return (<><p>Move mouse to see changes</p><p>x position: {x}</p><p>y position: {y}</p></>);
}
每次使用自定义 Hook 时,React 都会执行该函数来获取独立的 state 和执行独立的副作用函数,所有 state 和副作用都是完全隔离的