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的更多相关文章

  1. [React] Write a Custom React Effect Hook

    Similar to writing a custom State Hook, we’ll write our own Effect Hook called useStarWarsQuote, whi ...

  2. React学习笔记-03 state

    每一个组件都有状态,比如一个开关,开 和 关,都是一种state.那么react是怎么管理它的state的? React 把用户界面当做状态机,可以轻松的让用户界面和数据保持一致.用户只需要更新组件的 ...

  3. React使用DVA本地state传值取值

    React使用DVA本地state传值取值 最近在用Ant Pro 做一个后台系统,在使用中发现Antd Pro使用DVA来实现redux+sagas+router一系列的功能,比传统方式要方便快捷的 ...

  4. [转] 深入理解React 组件状态(State)

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  5. React中Props 和 State用法

    React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下 ...

  6. React学习:状态(State) 和 属性(Props)

    State 与 Props 区别props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法 ...

  7. 深入理解React 组件状态(State)

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  8. React躬行记(15)——React Hooks

    Hook(钩子)是React v16.8新引入的特性,能以钩子的形式为函数组件附加类组件的状态.生命周期等特性.React的类组件有难以拆分.测试,状态逻辑分散,难以复用等问题,虽然可以通过渲染属性( ...

  9. State Hook

    1 useState函数的第一个参数,是state变量的初始值. 2 每次渲染时,多个State Hook的顺序.数量都是一样的.(不能多.不能少) 3 state变量是只读的 4 state变量发生 ...

随机推荐

  1. Python安装-Pycharm+Anaconda

    1.初识Python Python是一门非常简单优雅的编程语言,可以用极少的代码就能实现强大的功能,而且学习起来十分简单,没有编程基础也可轻松入门.其功能强大,特别是第三方库的库的支持,使得开发方便十 ...

  2. memcached源码分析二-lru

    在前一篇文章中介绍了memcached中的内存管理策略slab,那么需要缓存的数据是如何使用slab的呢? 1.    缓存对象item内存分布 在memcached,每一个缓存的对象都使用一个ite ...

  3. PXC增量恢复添加节点(IST)

    绕开SST通过IST方式添加Node到Percona XtraDB Cluster  Gcache存储了所有的  writeset ,因此说这个集合的大小直接决定了允许其他节点宕机后多长时间内可以进行 ...

  4. mvn: command not found in Jenkins slave

    在Jenkins上添加了一个slave node, 并绑定了一个团队项目,通过shell来执行后续操作,结果卡在了 mvn: command not found 其实这个node上是配置了maven的 ...

  5. Keyboard Purchase CodeForces - 1238E (状压)

    大意: 给定串$s$, 字符集为字母表前$m$个字符, 求一个$m$排列$pos$, 使得$\sum\limits_{i=2}^n|{pos}_{s_{i-1}}-{pos}_{s_{i}}|$最小. ...

  6. WPF 程序如何跨窗口/跨进程设置控件焦点

    原文:WPF 程序如何跨窗口/跨进程设置控件焦点 WPF 程序提供了 Focus 方法和 TraversalRequest 来在 WPF 焦点范围内转移焦点.但如果 WPF 窗口中嵌入了其他框架的 U ...

  7. IOC+EF+Core项目搭建EF封装(一)

    添加应用Microsoft.EntityFrameworkCore:Microsoft.EntityFrameworkCore.Design:Microsoft.EntityFrameworkCore ...

  8. 进入恢复模式(Recovery HD)

    进入恢复模式(Recovery HD) 1,选中要启动的虚拟机,随后点击VM菜单的启动按钮后面向下箭头,随后点击菜单项”打开电源时进入固件“. 2,在虚拟机里面,用上下键移动到”Enter setup ...

  9. iOS加解密最重要的干货:CCCrypt

    需要引入框架#import <CommonCrypto/CommonCryptor.h> 函数定义: CCCryptorStatus CCCrypt( CCOperation op, /* ...

  10. cloudera manager(CDH)实践

    cloudera manager 可以简化 Hadoop 的安装配置过程,自动在集群节点上安 装 hadoop 相关组件,创建用户,并管理各个组件服务.本手册以 cloudera manager 的 ...