React学习 Hooks的使用（三）

已于 2022-03-25 19:54:59 修改
阅读量135 收藏
点赞数
分类专栏： React 文章标签： react.js javascript
于 2021-09-12 16:46:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46831501/article/details/120251236
版权

**

自定义Hook

**

自定义Hook就是将原来react提供的Hook进行抽取，放到一个新的函数中去，这样做的目的就是减少重复代码的编写，使Hook得以被复用，使代码看起来更加简洁明了。

使用自定义Hook时要注意，名字要用use开头，不然可能会报错，有些函数用不了。

对useEffect自定义：
在这里插入图片描述
在这里插入图片描述

对useContext：
父组件中要共享的数据
在这里插入图片描述
将useContext封装在一个独立的js文件中，返回一个数组。
在这里插入图片描述

在子组件中直接进行数组的结构拿到值。
在这里插入图片描述
在这里插入图片描述

获取滚动位置的自定义Hook
使用useState来保存滚动的位置
通过useEffect订阅和销毁scroll事件，再通过定义一个handleScroll函数来将滚动的最新位置保存在setPosition中，最后将position返回出去。
在这里插入图片描述

再组件中导入自定义的Hook后就可以直接使用了
在这里插入图片描述
在这里插入图片描述

本地localStorage存储的自定义Hook
在这里插入图片描述
在这里插入图片描述

Tara___
关注
专栏目录
react hook页面滚动到某一高度，显示回到顶部按钮
qq_36257356的博客
03-28 1266
回到顶部组件： import React, { useEffect, useState } from 'react'; import { ArrowUpOutlined } from '@ant-design/icons'; import PropTypes from 'prop-types'; function ToTop(props) { const { showPhone } = props; const [show, switchShow] = useState(false);
react-hooks-worker:为Web WorkerReact自定义钩子
05-13
React钩工人 为Web WorkerReact自定义钩子。 介绍 Web Worker是浏览器中主线程中的另一个... import { exposeWorker } from 'react-hooks-worker' ; const fib = i => ( i <= 1 ? i : fib ( i - 1 ) + fib ( i - 2
scroll-hooks:使用React Hooks实现滚动动画
04-29
欢迎使用滚动挂钩 :waving_hand: 使用React Hooks实现滚动动画 :sparkles: 滚动钩 使用React Hooks进行滚动时可使用的淡入，计数，剪切路径动画 useScrollFadeIn 滚动时从特定方向淡入时出现的动画 用法 const element = useScrollFadeIn ( [ direction ] , [ duration ] , [ delay ] ) ; direction（string）：元素出现的方向（上，下，左，右） default value = 'up' duration（number）：动画的总持续时间。 秒单位default value = 1 delay（number）：动画延迟时间。 秒单位default value = 0 例子 const animatedItem = useScrollFadeIn ( 'up' , 1 , 0 ) ;
react-smooth-scroll-hook:一个在React组件中使用平滑滚动的React Hook
04-14
它提供了useSmoothScroll钩子来完成react组件中的平滑滚动行为，并提供了useScrollWatch来返回滚动容器中的某些信息。 这是替换本机scrollTo api的一种更方便的方法。 故事书文档在。 特征 :rocket: 您不需要警告兼容性，它使用requsetAnimationFrame api完成平滑的滚动行为。 :backhand_index_pointing_right: 提供direction选项，您可以将x设置为水平，将y为垂直。 :droplet: 没有第三方的依赖，轻巧而纯粹。 安装 npm install react-smooth-scroll-hook useSmoothScroll 快速开始 import React , { useRef } from 'react' ; import useSmoothScroll from 'react-smooth-scroll-hook' ; export const Demo
21 个整理 React 项目的最佳实践
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-10 135
今天，我们将讨论一些改善React应用程序运行状况的最佳实践。这些规则应用广泛。因此，拥有这些知识势在必行。unsetunset1. 使用JSX速记unsetunset尝试使用JSX速记来传递布尔变量。举个例子，假设你想要控制导Navbar组件的标题可见性。坏return( <NavbarshowTitle={true}/> );好return( <Navbars...
React后台管理系统- rc-pagination分页组件封装
wyw223的博客
06-26 1817
React后台管理系统- rc-pagination分页组件封装 1.用户列表页面使用的rc-pagination分页组件       Github地址: https://github.com/react-component/pagination   2.安装      cnpm install --save-dev rc-pagination   3.引入 import Re...
React中自定义Hook的使用(非常重要)
weixin_45389051的博客
07-30 4043
React中的自定义Hook我觉得真的是特别香了,自定义Hook本质上是一种函数代码逻辑的抽取,类似vue2.0的mixin,但是mixin有多少坑我就不说了… 下面我来通过三个案例要具体使用一下自定义Hook 一.Context的共享 首先我们在APP.js中定义两个context export const UserContext = createContext() export const TokenContext = createContext() <UserContext.Provid
react-hooks-mobx:React Hooks + MobX指南
05-14
React Hooks + Mobx指南 链接到示例： : 链接到详细指南： : 建立统计 File sizes after gzip: 54.13 KB build\static\js\2.f209cf74.chunk.js 1.46 KB build\static\js\main.2336ad02.chunk.js 779 B build\...
react-hooks:练习 react hooks 使用 Hacker News API 搜索新闻
05-29
本项目"react-hooks:练习 react hooks 使用 Hacker News API 搜索新闻"正是一个实践React Hooks的实例，通过结合Hacker News开放API，实现了新闻搜索功能，为学习和理解React Hooks提供了很好的实践平台。...
React 使用Hooks简化受控组件的状态绑定
12-11
Hooks是React引入的一种新功能，它允许在函数组件中使用状态和其他类组件特有的特性，如生命周期方法。React提供的核心Hooks包括`useState`和`useReducer`。`useState`用于创建和更新状态，而`useReducer`则适用于更...
react-hooks-redux-registration-login-example：React Hooks + Redux-用户注册和登录教程及示例
02-05
React Hooks是React 16.8版本引入的新特性，它允许我们在不编写类组件的情况下使用状态和其他React生命周期方法。Redux则是一种可预测化的状态管理库，常用于管理应用中的复杂状态。结合这两者，我们可以构建出高效...
rc-form-hooks:使用挂钩将表单组件绑定到诸如统一验证之类的操作并获取值
03-18
rc-形式钩 使用挂钩将表单组件绑定到诸如统一验证和获取值之类的操作。 安装 npm install --save rc-form-hooks 或者 yarn add rc-form-hooks 用法 import React from 'react' ; import useForm from 'rc-form-hooks' ; export default ( ) => { const { getFieldDecorator , validateFields , errors , values } = useForm < { username : string ; } > ( ) ; const handleSubmit = ( e : React . FormEvent ) => { e . preventDefault ( ) ; valida
React开发必须掌握的14个实践技巧
WPHunter的编程技术资料库！
01-07 1275
在本教程中，我们将首先讨论React开发人员面临的一些常见挑战，然后深入探讨一些你可以遵循的最佳实践，以帮助你以更有效的方式编写React代码。
React 最佳实践 （1）
xuewenjie0217的博客
12-16 508
组件 1、基本规则 一个文件声明一个组件 使用 JSX 语法 使用 Class、函数或 Hooks 声明组件，不使用 React.createElement 2、组件名 （1） 组件名称和定义该组件的文件名称尽量保持一致，名称尽量简短 // Good import MyComponent from './MyComponent'; // Bad import MyComponent from './MyComponent/index'; (2) 应在 class、function(箭头函数就是 c
用TypeScript编写React的最佳实践
热门推荐
azl397985856的专栏
06-02 1万+
本文译自 https://www.sitepoint.com/react-with-typescript-best-practices/如今， React 和 TypeScript 是许...
你不知道的 React 最佳实践
azl397985856的专栏
05-26 1139
React ⚛️React 是一个用于开发用户界面的 JavaScript 库， 是由 Facebook 在 2013 年创建的。 React 集成了许多令人兴奋的组件、库和框架[1]。...
重新思考 React 最佳实践
liangshanbo1215的博客
04-09 1075
深入探讨 React 从客户端视图库到应用程序架构的演变。十多年前，React 重新思考了客户端渲染 SPA 世界的最佳实践。如今，React 正处于采用的高峰期，并继续受到健康的批评和怀疑。React 18 与 React 服务器组件 （RSC） 一起，标志着从其最初的标语到客户端 MVC 中的“视图”的重大阶段转变。在这篇文章中，我们将尝试理解 React 从库 React 到 React 架构的演变。
React17 设计模式最佳实践（五）
最新发布
龙哥盟
07-22 818
我们的部署过程之旅已经结束，现在你知道如何将你的 React 应用部署到世界（生产环境），以及如何实现 CircleCI 进行持续集成。在下一章中，我们将学习如何发布npm包。在这次环绕 React 世界的旅程的最后一站，我们看到了使 React 变得伟大的一些方面 - 其社区和生态系统 - 以及如何为它们做出贡献。您学会了如何在发现 React 中的错误时提出问题，以及采取的步骤使其核心开发人员更容易修复它。您现在知道在开源代码时的最佳实践，以及随之而来的好处和责任。最后，您看到了在npm。
react 虚拟滚动列表hook实现例子
Lemonreds
09-24 890
效果图 使用例子 import React from 'react'; import useVirtual from './useVirtual'; const colors = ['#8868ff', '#24cdd0', '#ffc84e', '#fe657f', '#748cfd']; export default () => { const [list1, containerProps1, wrapperProps1] = useVirtual({ total: 9996,
react的hooks学习
09-16
《学习React Hooks》这本书是关于使用Hooks构建和重构现代React.js应用程序的。React Hooks彻底改变了在Web应用程序中管理状态和效果的方式。它们使您能够构建简单明了的React应用，同时避免使用类组件的繁琐和复杂...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值