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”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！