hooks 系列七:自定义 hook
快来加入我们吧!
"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习,及时获取最新文章。
"Code tailor" ,如果您对我们文章感兴趣、或是想提一些建议,微信关注 “小和山的菜鸟们” 公众号,与我们取的联系,您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励!
自定义 hook
官方文档在讲自定义 hook时,给了一个好友状态的例子,但是例子较为复杂,难懂。在这里我们用一种更简单的方式,教您学会自定义 hook。
什么是自定义 hook
当我们想在两个函数之间共享逻辑时,我们会把它提取到第三个函数中。而组件和 hook
都是函数,所以也同样适用这种方式。
自定义 Hook 是一个函数,其名称以 “use
” 开头,函数内部可以调用其他的 hook
与组件中一致,请确保只在 自定义 hook 的顶层无条件地调用其他 hook
一个简单的自定义 hook 案例
使用一个最简单的代码来了解一下自定义 hook
import { useState } from 'react'const useMyHook = (initValue) => {const [value, setValue] = useState(initValue || '')return value
}function App() {const myHookValue = useMyHook('myHook')return <div className="app">{myHookValue}</div>
}
上述代码中,我们就可以看出,我自定义了一个名为 useMyHook
的自定义 hook
,而它也并没有什么功能,只是用来返回一个自定义的值。结果展示:
对案例进行升级
上面的案例中,我们只是进行简单的展示,而并没有其他的任何操作,你可能还不能理解什么是 自定义 hook,那么现在,我们来对上面的案例进行升级,加入一个 input
,来让你更清楚的认识到 自定义 hook.
我们现在需要有一个输入框,并通过一个自定义 hook
,来对它进行值的传递和函数值的修改。
import { useState } from 'react'const useMyHook = (initValue) => {const [value, setValue] = useState(initValue || '')const onChange = (e) => {setValue(e.target.value)}return { value, onChange }
}function App() {const myHookValue = useMyHook('myHook')return (<div className="app"><p>value:{myHookValue.value}</p><input value={myHookValue.value} onChange={myHookValue.onChange} /></div>)
}
上面的代码中,我们建了一个可以通过输入框输入内容实时更改数据的案例。
通过一个 自定义 hook useMyHook
来实现,在这里,我们在 自定义 hook 中返回一个 value
,用来展示现在的值。一个 onChange
函数,用来修改当前的 value
。而我们在使用时,p
标签中展示的是现在 value
,input
的改变函数使用的是自定义中的 onChange
,展示值时 myHookValue
中的 value
。
结果显示:
小结
至此,我们最简单的自定义 hook
案例就结束了。
自定义 hook
必须要以 use
开头命名,在其内部调用其他 hook
。比如 例子中我们使用的 useMyHook
,就是 use
开头的命名,在其中调用了 useState
.
下节预告
到这里,hooks
的学习快要结束了,后面我们将会帮助大家进行 hooks
的总结,并用实战案例帮助大家进一步理解
hooks 系列七:自定义 hook相关推荐
- Web Components系列(七) ——自定义组件的生命周期
前言 何谓"生命周期"?顾名思义,生命周期就是指一个物体从产生前到消亡后的整个过程,当然,不同物体的生命周期具体阶段划分可能不太一样. 我们在使用前端组件框架的时候,都知道每个组件 ...
- React Hooks的使用(三)——useRef、useImperativeHandle、useLayoutEffect解析、自定义Hook
一.useRef useRef返回一个ref对象,返回的ref对象再组件的整个生命周期保持不变. 最常用的ref是两种用法: 用法一:引入DOM(或者组件,但是需要是class组件)元素: 案例一:引 ...
- hook修改信息_React系列二十一 Hook(二)高级使用
一. Hook高级使用 1.1. useReducer 很多人看到useReducer的第一反应应该是redux的某个替代品,其实并不是. useReducer仅仅是useState的一种替代方案: ...
- Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager)
Alamofire源码解读系列(七)之网络监控(NetworkReachabilityManager) 本篇主要讲解iOS开发中的网络监控 前言 在开发中,有时候我们需要获取这些信息: 手机是否联网 ...
- React 全家桶(react脚手架 redux react-redux react-router-dom ui库 reactHook)含 自定义hook的方法及使用
文章目录 React 入门 React 简介 React 为何物 为何学习 React React 初体验 来一发 Hello React 创建虚拟 DOM 的两种方式:JS 和 JSX 虚拟 DOM ...
- 你应该会喜欢的5个自定义 Hook
作者:Grégory D'Angelo 译者:前端小智 来源: dev 点赞再看,微信搜索**[大迁世界],B站关注[前端小智]**这个没有大厂背景,但有着一股向上积极心态人.本文 GitHub ht ...
- iOS流布局UICollectionView系列七——三维中的球型布局
iOS流布局UICollectionView系列七--三维中的球型布局 发布时间: 2015/10/29 13:25 阅读: 1487 收藏: 23 点赞: 1 评论: 5 摘要 类似标签云的球状布局 ...
- Android(Lollipop/5.0) Material Design(七) 自定义动画
Material Design系列 Android(Lollipop/5.0) Material Design(一) 简介 Android(Lollipop/5.0) Material Design( ...
- hook——useState——useState的并发写法——受控组件—— 自定义hook函数-封装hook
简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们 ...
最新文章
- iOS网络编程-配置iCloud-图文解说
- Algorithm之MC:Monte Carlo method蒙特·卡罗方法的简介、实现、应用
- Git下载与使用(Git地址由CSDN提供)
- 面向对象(静态成员内部类的调用)
- 实验6 实践课程中的程序
- java interface 实例_Java - Interface 接口的实现方式实例
- FPGA系统时间戳偶尔异常分析及定位
- MimeType文件格式速查表
- python表白代码-python告白代码,只属于程序员的浪漫
- 高通QCA9563详细资料全集-datasheet-原理图-PCB-HDK等资料免费下载
- CMD编写bat病毒
- 数据挖掘、数据分析以及大数据之间的区别有哪些?
- 全球最大同性交友网站十周年!
- [py练习] 人口增长的问题
- A*搜索算法——图形搜索算法
- python名字的来历_你知道Python的由来吗
- 4.4亿赎金,6800GB数据窃取,勒索病毒攻击到底怎么防?
- 简述工业机器人示教再现的一般步骤_工业机器人示教与初识编程语言
- ubuntu 安装Apache2
- Windows+python3.6+Anaconda安装shogun包