React 自定义hook及一个hook库分享

已于 2023-07-16 08:52:11 修改
阅读量100 收藏
点赞数
文章标签： react.js 前端 前端框架
于 2023-07-15 20:22:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72514293/article/details/131734752
版权
自定义Hook是React16.8引入的新特性，允许开发者在函数组件中复用状态逻辑。它们以`use`开头，可以调用内置Hook如useState和useEffect。自定义Hook需遵循特定规则，如在函数组件顶层使用。文章提到了ahooks库，这是一个提供多种实用Hook的库，包括useReactive、useNetwork等，且支持SSR和TypeScript。
摘要由CSDN通过智能技术生成

什么是自定义hook

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

  • React提供的hook：useState、useEffect.....
  • 自定义hook：通过一个以“use”开头命名的函数，实现一些功能逻辑，内部可以调用其他hook。通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

hooks的规则

  • 只在最顶层使用hooks，不要在循环、条件或者嵌套中调用hook
  • 只在react函数（react函数组件、自定义hook组件）中调用hook，不要在普通的javascript函数中调用
  • 可以使用eslint-plugin-react-hooks来强制执行这两条规则

自定义hook的规则

  • 本质是一个函数，以“use”开头
  • 内部正常使用useState、useEffect或者其他hooks自定义返回结果，格式不限。
  • 每次调用 Hook，它都会获取独立的 state

示例

useFullscreen

useMap

一个好用的hooks库：ahooks

特性

  • 易学易用
  • 支持 SSR
  • 对输入输出函数做了特殊处理，避免闭包问题
  • 包含大量提炼自业务的高级 Hooks
  • 包含丰富的基础 Hooks
  • 使用 TypeScript 构建，提供完整的类型定义文件
几个hooks

m0_72514293
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用自定义hooks提升列表页的体验
施强前端团队
08-30 296
在前端开发的内容中，对于一些筛选项+列表的页面经常会遇见。
useripple:一个React Hook来增加涟漪效果
05-14
关于useRipple是一个 ，可为单击的元素添加动画波纹效果。用法第1步-安装模块npm install useripple 第2步-添加CSS关键帧@keyframes useRippleAnimation { to { transform : scale ( 15 ); opacity : 0 ; }} :index_...
自定义hooks
jiang7701037的博客
07-09 1262
2）、在自定义hooks里可以使用其它hooks。（普通函数里不能调用hooks）；1）、函数名必须以use开头。并且是小驼峰（use后面的首字母需要大写）3）、hooks 只能在其它hooks或者函数式组件里使用。把自定义hooks单独写在一个模块里。1、Hook 是一个函数。
React 自定义hooks最佳实践
zmjのblog
09-14 3888
react hooks推出已经有一段时间了，而自定义hooks在hooks中其实是非常关键的一环，它是抽离业务逻辑和UI逻辑，复用代码的关键
React 如何自定义 Hooks
hawk2014bj的博客
05-23 464
React 内部自带了很多 Hooks 例如 useState、useEffect 等等，那么我们为什么还要自定义 Hooks？使用 Hooks 的好处之一就是重用，可以将代码从组件中抽离出来定义为 Hooks，而不用每个组件中重复去写相同的代码。首先是维护方便，更重要的是封装，Hooks 将业务逻辑进行了封装，只要返回值不变，任何改动对组件都是透明的。
自定义Hooks组件
达摩龙的博客
11-09 69
1、组件名称以use开头，比如说，useAddRecord.ts。
ReactHookComponents:自定义React Hook的集合
04-18
"ReactHookComponents"项目则是一个专门收集和提供自定义React Hook的资源库，旨在帮助开发者更方便地在他们的应用中复用和管理状态逻辑。下面将详细探讨React Hooks的基础概念、自定义Hook的创建以及如何利用这个...
react hook使用分享
10-13
React Hook 使用分享 React Hook 是 React 框架中的一种新式状态管理方案，旨在解决逻辑复用问题。下面是对 React Hook 的使用分享，包括为什么要用 Hook、Hook 与其他方案的对比、Hook 的使用技巧等。 一、为什么...
用于图像自然大小的自定义 React Hook
06-08
react-hooks-image-size 用于图像自然大小的自定义 React Hook。 安装注意：确保您安装了正确版本的 react(>= v16.8.0) 和 react-dom(>= v16.8.0)。 npm npm install --save @use-hooks/image-size yarn yarn add @...
react-hook-sticky:粘钩React
05-12
React钩发粘 粘性组件的高性能轻量级解决方案。...yarn add react-hook-sticky --exact 快速开始 基本的 // sticky-component.js import React from 'react' ; // 1 - Import import { useSticky , plu
React Hooks自定义hooks
cong0912的博客
10-06 42
自定义hooks是在react-hooks基础上的一个拓展，可以根据业务需要制定满足业务需要的hooks，更注重的是逻辑单元。通过业务场景不同，我们到底需要react-hooks做什么，怎么样把一段逻辑封装起来，做到复用，这是自定义hooks产生的初衷。自定义 hooks 专注的就是逻辑复用。将一段通用的逻辑存封起来，当需要这个逻辑的时候，开箱即用。
react之自定义hooks
study_way的博客
07-01 4339
要自定义一个类似于的自定义 Hook，你可以借助 React 的useEffect和useRefHooks 来实现。effect();} else {// 使用示例return (在上述示例中，我们创建了一个名为的自定义 Hook。effect和。在内部，我们使用了useRef来创建一个标记是否已经完成初始渲染的变量isMounted。在useEffect中，我们检查isMounted的值。如果isMounted的值为true。
react 进阶hook 之自定义Hook
twinkle的博客
04-07 3108
含义 从标题上看，自定义hook的主要是自己定义，那么对于hooks的定义又是啥呢？ 简单点的回答，hooks是一个函数，并且是在react 函数组件中使用的，不同的hook的作用也是不一样的，例如，state hook是用来定义函数组件的状态， 而effect hook 是用来定义组件的副作用,那么自定义hook是用来干啥的呢？,自定来定义一个hook 函数，里面可以包含 多个hooks。简单点的说是，把相同逻辑的hooks封装在同一个函数里。 规则 hooks 的使用方式都是 use 开头，那么我们自
学会这些自定义hooks，让你摸鱼时间再翻一倍
油墨香^-^的博客
03-09 1211
拿破仑曾说过，不想当将军的士兵不是好士兵，不会摸鱼的员工不是好员工 [手动狗头]。本文将从各种实用场景出发，讲解不同场景下使用自定义hooks的最佳实践，手牵手教你封装自己的hooks工具库，高效摸鱼🐟，拒绝低效🙅。Demo。下面让我们开始吧🏃。hooks规则不是本文的重点，不做过多的赘述，详情见官网。useMountuseUnMountuseLatest如果有一些hooks你经常用，但是我没有列出来，请在评论区告诉我，你提需求，我来写😉。其实这些自定义hooks。
react 中如何自定义hooks
DDAD9527的博客
11-15 5142
首相要知道自定义hooks的目的是什么,区别于自定义组件 自定义hooks最大的好处就是可以 逻辑复用 1. 自定义 Hooks 是一个函数，约定函数名称必须以 use 开头，React 就是通过函数名称是否以 use 开头来判断是不是 Hooks 2. Hooks 只能在函数组件中或其他自定义 Hooks 中使用，否则，会报错！ 3.自定义 Hooks 用来提取组件的状态逻辑，根据不同功能可以有不同的参数和返回值（就像使用普通函数一样） 下面这是一个自定义倒计时的 hooks ① 首先定义一.
超性感的React Hooks（五）：自定义hooks
fedlover的博客
12-02 2377
1 在实践中，我们常常会遇到逻辑相同的功能片段。对于这样的场景，更省力的方式是，将这些功能片段封装成为一个单独函数来使用。 例如，比较两个数组是否相等，可以封装一个equal方法，来处理这个通用逻辑。 export default function equalArr(a: number[], b: number[]) { if (a.length !== b.length) { ret...
react自定义hook
最新发布
06-05
自定义 Hook 是一个以 `use` 开头命名的函数，它可以在其中使用 React 内置的 Hook 或者其他自定义 Hook。自定义 Hook 返回的值可以是任意类型的数据，一般包含状态和操作状态的方法。 下面是一个自定义 Hook 的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值