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的文章就介绍到这了,更多相关React自定义hook内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
