通过自定义 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 和副作用都是完全隔离的