React自定义hook的方法


Posted in Javascript onJune 25, 2022
  • 什么是hook

HookReact 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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
JavaScript URL参数读取改进版
Jan 16 Javascript
Js基础学习资料
Nov 23 Javascript
JS定时关闭窗口的实例
May 22 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
使用javascript实现json数据以csv格式下载
Jan 09 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
layui 弹出删除确认界面的实例
Sep 06 Javascript
Vue实现开心消消乐游戏算法
Oct 22 Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
JavaScript设计模式之原型模式详情
Jun 21 #Javascript
You might like
thinkphp命名空间用法实例详解
2015/12/30 PHP
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
vue+iview 实现可编辑表格的示例代码
2018/10/31 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
2018/12/19 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
python学习笔记:字典的使用示例详解
2014/06/13 Python
Python3基础之基本运算符概述
2014/08/13 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python无损音乐搜索引擎实现代码
2018/02/02 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
详解Python设计模式之策略模式
2020/06/15 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
护士见习期自我鉴定
2014/02/08 职场文书
个人工作表现评语
2014/04/30 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
用PYTHON去计算88键钢琴的琴键频率和音高
2022/04/10 Python