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学习日记(一) String函数使用

    s = "abcaDa a" s2 = "123a abc ABCSAa s " s3 = "\tas \t\tb123" s4 = ' & ...

  2. 20191210-RobotFramework常见问题解决

    附加-问题解决 1.   执行robot用例的时候提示WebDriverException: Message: invalid argument: can't kill an exited proce ...

  3. matlab 2017b 支持的C编译器

    在电力电子开发领域,matlab是非常重要的工具,随着系统仿真和编程开发的不断融合,在matlab中使用混合编程并进行仿真验证,甚至是软件工程里面,源文件的自生成.编译以及一键程序下载等功能,都是越来 ...

  4. centos jira wiki 开机自启

    启动jira 和 wiki 需要java环境变量 操作步骤: 在 /etc/rc.d/rc.local 文件中[ 注意要有可执行权限 ] export JAVA_HOME=xxxxxxxx expor ...

  5. quartz2.3.0(四)JobDataMap—带状态集合的定时器内置集合

    任务类 package org.quartz.examples.example4; import java.util.Date; import org.quartz.DisallowConcurren ...

  6. 作为一个纯粹数据结构的 Redis Streams

    来源:antirez 翻译:Kevin (公众号:中间件小哥) Redis 5 中引入了一个名为 Streams 的新的 Redis 数据结构,吸引了社区极大的兴趣.接下来,我会在社区里进行调查,同用 ...

  7. .NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态

    原文:.NET/C# 阻止屏幕关闭,阻止系统进入睡眠状态 在 Windows 系统中,一段时间不操作键盘和鼠标,屏幕便会关闭,系统会进入睡眠状态.但有些程序(比如游戏.视频和演示文稿)在运行过程中应该 ...

  8. Flask中jinja2的应用

    Flask中jinja2的应用 # -*- coding: utf-8 -*- # @Time : 2019/9/24 17:29 # @Author : AnWen from flask impor ...

  9. JavaScript 继承 封装 多态实现及原理详解

    面向对象的三大特性 封装 所谓封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的类或者对象操作,对不可信的进行信息隐藏.封装是面向对象的特征之一,是对象和类概念的主要特性. ...

  10. 造成thrift 编译构建项目失败的原因之一:thrift环境变量没设置

    由于重装了系统和IDEA工具,打开原项目时使用install 构建使用thrift 协议的项目时失败.下面是说说我遇到的问题 看下图,就是构建时控制台输出的日志,因为是乱码,当时没重视,就先去检查po ...