[React] Write a Custom State Hook in React
Writing your own custom State Hook is not as a daunting as you think. To keep things simple, we'll refactor our text state value that uses useState and instead create a custom hook called useText.
function useText(initialValue) {
return useState(initialValue)
}
export function FeedbackCustomComponent() {
const [text, setText] = useText('')
useEffect(() => {
async function getStarWarsQuote() {
// Get initial text
const response = await fetch(
'https://starwars-quote-proxy-gi0d3x1lz.now.sh/api/randomQuote'
)
const data = await response.json()
const quote = data.starWarsQuote
setText(quote)
}
getStarWarsQuote()
}, [setText])
[React] Write a Custom State Hook in React的更多相关文章
- [React] Write a Custom React Effect Hook
Similar to writing a custom State Hook, we’ll write our own Effect Hook called useStarWarsQuote, whi ...
- React学习笔记-03 state
每一个组件都有状态,比如一个开关,开 和 关,都是一种state.那么react是怎么管理它的state的? React 把用户界面当做状态机,可以轻松的让用户界面和数据保持一致.用户只需要更新组件的 ...
- React使用DVA本地state传值取值
React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的 ...
- [转] 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- React中Props 和 State用法
React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...
- React学习:状态(State) 和 属性(Props)
State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...
- 深入理解React 组件状态(State)
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- React躬行记(15)——React Hooks
Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...
- State Hook
1 useState函数的第一个参数,是state变量的初始值. 2 每次渲染时,多个State Hook的顺序.数量都是一样的.(不能多.不能少) 3 state变量是只读的 4 state变量发生 ...
随机推荐
- python大数据挖掘和分析的套路
大数据的4V特点: Volume(大量):数据巨大. Velocity(高速):数据产生快,每一天每一秒全球人产生的数据足够庞大且数据处理也逐渐变快. Variety(多样):数据格式多样化,如音频数 ...
- 39 多线程(十一)——ThreadLocal
目前阶段,我只能知其然,不能做到知其所以然,这里引用一篇其所以然的文章,为以后理解ThreadLocal做准备: https://www.cnblogs.com/ldq2016/p/9041856.h ...
- Python Web开发技术栈
- [LOJ2290] [THUWC2017] 随机二分图
题目链接 LOJ:https://loj.ac/problem/2290 洛谷:https://www.luogu.org/problemnew/show/P4547 Solution 首先考虑只有第 ...
- 2.3_Database Interface ODBC组成原理
从某种意义上来讲,ODBC实际上主要是一个数据库的访问库(API),它包含访问不同数据库所要求的ODBC驱动程序.应用程序要操作不同类型的数据库,只要调用ODBC所支持的函数,动态链接到不同的驱动程序 ...
- Sql Server 使用游标辅助循环
项目临时表#TMPxmdt 存有ID,起始年度,完成年度(int型)两个字段: 实现功能:将#TMPxmdt表中每个ID对应的起始年度至完成年度中所有年度以(ID, ND)的形式插入另一个临时表#TM ...
- 那些年,Linus torvalds大神喷过的技术
Linus Torvalds 被认为是最伟大的程序员之一,因为他写出了使用最广泛的软件,如 Linux 内核和 Git 版本控制系统.但是他这个人经常因为讲话带有情绪,甚至是因为带有脏话的意见而饱受非 ...
- input file 无法打开手机端文件选择器
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37805167/article/details/78538044手机端对input file的 ...
- centos安装docker以及docker-compose
1.yum更新 # sudo yum update 2.如果安装docker旧版本,旧版本的卸载 # sudo yum remove docker docker-common docker-selin ...
- Django:ORM介绍
1.ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述 ...