React create custom hooks

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

• 常用的有哪些hook

React中常用的hooks有：

1. useState 状态管理
2. useEffect 生命周期
3. useContext 跨组件数据传递
4. useRef 组件引用
5. ....

• 自定义hook

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

1. 获取窗口宽高变化

实现目标：通过 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 fn = () => {
            setSize({
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            })
        }
        window.addEventListener('resize', fn)
        return () => {
            window.removeEventListener('resize', fn)
        }
    },[])
    
    return size
}

export default useWindowSize;

组件使用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

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

2. 获取滚动偏移量变化

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

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;

　　组件中使用：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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;

3. 自动同步至localStorage

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

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

?

1 2 3 4 5 6 7 8 9 10 11

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;

　组件使用:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

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;

　　

__EOF__

本文作者：时光
本文链接：https://www.cnblogs.com/SHGG/p/16835164.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！