React的hooks---自定义hooks

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