自定义hook

自定义hook是一个函数，函数内部可调用其他hook函数，且以use开头命名。主要作用是对逻辑功能 进行封装处理，达到一种复用能力。

1. 需求

实现一个实时获取鼠标坐标的自定义Hook

2. 代码实现

import { useEffect, useState } from 'react'

function useMouse() {
  const [pos, setPos] = useState({
    pageX: NaN,
    pageY: NaN
  })
  function mouse(e) {
    setPos({...pos, pageX: e.pageX, pageY: e.pageY})
    return pos
  }
  useEffect(() => {
    document.addEventListener('mousemove', mouse)
    return (()=>{
      document.removeEventListener('mousemove', mouse)
    })
  })
  return pos
}

function App() {
  // 使用自定义hooks
  const mouse = useMouse()
  return (
    <>
      hello App
      <br />
      <br />
      {mouse.pageX}, {mouse.pageY}
    </>
  )
}
export default App

运行效果：