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