3.7 什么是自定义Hook

一、什么是自定义Hook

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

2. 封装一个获取鼠标坐标的hook

   import { useEffect, useState } from 'react'
   
   // 定义一个获取鼠标坐标的hook
   function useMouse() {
     const [state, setState] = useState({
       pageX: NaN,
       pageY: NaN,
     })
   
     useEffect(() => {
       function move(e) {
         setState({
           pageX: e.pageX,
           pageY: e.pageY,
         })
       }
       document.addEventListener('mousemove', move)
       return () => {
         document.removeEventListener('mousemove', move)
       }
     }, [])
   
     return state
   }
   
   // 调用
   function App() {
     const mouse = useMouse()
   
     return (
       <>
         <div>
           Default Template, {mouse.pageX}, {mouse.pageY}
         </div>
       </>
     )
   }
   
   export default App
   

3. 第三方Hooks库：ahooks， react-use...

   ahooks是一套高质量可靠的ReactHooks库。在当前React研发过程中，一套好用的ReactHooks库是必不可少的

4. 使用ahooks

   1. 安装：npm install ahooks

   2. 修改后：

      import { useMouse } from 'ahooks'
      
      function App() {
        const mouse = useMouse()
      
        return (
          <>
            <div>
              Default Template, {mouse.pageX}, {mouse.pageY}
            </div>
          </>
        )
      }
      
      export default App