文章目录

• 使用Hooks的规则
• 语法
• 例子
• • 定义
  • 使用

使用Hooks的规则

我们进行自定义Hooks的时候，也要注意使用Hooks的规则

语法

1. 一般名称以use开后
2. 其内部可以调用其他的hooks
3. 自定义的hooks，他本身也是一个函数，实现相应的功能，返回我们需要的值

例子

定义

import { useCallback, useEffect, useState } from "react";

function useWinsize() {
  // 窗口宽度的初始值
  const [size, setSize] = useState({
    width: document.documentElement.clientWidth,
    heiht: document.documentElement.clientHeight
  });

  // 修改值
  const onResize = useCallback(()=>{
    setSize({
      width: document.documentElement.clientWidth,
      heiht: document.documentElement.clientHeight,
    })
  },[])

  // 页面重绘时，执行函数
  useEffect(()=>{
    window.addEventListener("resize",onResize)
    return ()=>{
      window.removeEventListener("resize",onResize)
    }
  },[])

  return size
}

这样就定义好了一个功能

使用

import { useWinsize } from './自定义Hook'

function App() {
    const {width,heiht} = useWinsize()

  return (
      <>
      <div>页面的宽高为:{width} * {heiht}</div>
      </>
  )
}

export default App

当我们拖动浏览器的窗口大小的时候我们就会发现Hooks实现了相应的功能