React如何自定义hook

本篇内容主要讲解“React如何自定义hook”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React如何自定义hook”吧!

什么是hook

Hook是 React 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能。

• 
  

  常用的有哪些hook

React中常用的hooks有：

• useState 状态管理

• useEffect 生命周期

• useContext 跨组件数据传递

• useRef 组件引用

• ....

• 
  

  自定义hook

自定义hook其实就是自定义函数，与我们写函数组件非常类似。自定义的hook组件的命名与系统的hooks一样，需要以use开头。下面我们用react+ts就来介绍一下常用的几个自定义hook

• 获取窗口宽高变化

实现目标：通过 useWindowSize()来实时获取窗口的宽高

新建一个hook文件useWindowSize.ts，代码如下：

import { useEffect, useState } from "react";//定义size对象interface WindowSize {    width: number,    height: number}const useWindowSize = () => {    const [size, setSize] = useState<WindowSize>({        width: document.documentElement.clientWidth,        height: document.documentElement.clientHeight    })    useEffect(() => {        //监听size变化        window.addEventListener('resize', () => {            setSize({                width: document.documentElement.clientWidth,                height: document.documentElement.clientHeight            })        })        return () => {            //组件销毁时移除监听            window.removeEventListener('resize', () => {                setSize({                    width: document.documentElement.clientWidth,                    height: document.documentElement.clientHeight                })            })        }    },[])    return size}export default useWindowSize

组件中这样使用：

import useWindowSize from './hooks/useWindowSize';function App() {  const size = useWindowSize()  return (    <div>      <div>页面宽度：{size.width}</div>      <div>页面高度：{size.height}</div>    </div>  )}export default App

在浏览器拖动放大缩小时，页面上的数据可动态变化

• 获取滚动偏移量变化

目标：通过 useWindowScroll()来实时获取页面的滚动偏移量

新建一个hook文件useWindowScroll.ts，代码如下：

import { useEffect, useState } from "react"//定义偏移量对象interface ScrollOffset {    x: number,    y: number}const useWindowScroll = () => {    const [off, setOff] = useState<ScrollOffset>({        x: window.scrollX,         y: window.scrollY    })    useEffect(() => {        //监听        window.addEventListener('scroll', () => {            setOff({                x: window.scrollX,                y: window.scrollY            })        })        return () => {            //移除监听            window.removeEventListener('scroll', () => {                setOff({                    x: window.scrollX,                    y: window.scrollY                })            })        }    })    return off}export default useWindowScroll

组件中这样使用：

import useWindowScroll from './hooks/useWindowScroll';function App() {  const offSet = useWindowScroll()  return (    <div style={{height: '10000px', width: '10000px'}}>      <div>滚动y：{offSet.y}</div>      <div>滚动x：{offSet.x}</div>    </div>  )}export default App

• 自动同步至localStorage

目标：通过 const [value, setValue] = useLocalStorage('key', 'value') 可以传入默认的初始value和key，且每次修改value可以自动同步到localStorage中

新建一个hook类useLocalStorage，代码如下：

import { useEffect, useState } from "react"const useLocalStorage = (key: string, defaultValue: string) : ([string, React.Dispatch<React.SetStateAction<string>>]) => {    const [value, setValue] = useState(defaultValue)    useEffect(() => {        window.localStorage.setItem(key, value)    },[key, value])    return [value, setValue]}export default useLocalStorage

组件中使用：

import useLocalStorage from './hooks/useLocalStorage';function App() {  const [value, setValue] = useLocalStorage('key', 'react')  return (    <div>    <button onClick={() => {        //点击修改value，会自动同步至本地        setValue('vue')      }}>点击</button>      <div>{ value }</div>    </div>  )}export default App

到此，相信大家对“React如何自定义hook”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！