本文首发于公众号【一个老码农】
-
什么是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(() => {
const fun = () => {
setSize({
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
})
}
window.addEventListener('resize', fun)
return () => {
window.removeEventListener('resize', fun)
}
},[])
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(() => {
const fun = () => {
setOff({
x: window.scrollX,
y: window.scrollY
})
}
//监听
window.addEventListener('scroll', fun)
return () => {
//移除监听
window.removeEventListener('scroll', fun)
}
})
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
