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. RPC和RestFul

    什么是REST REST是一种架构风格,指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful.REST规范把所有内容都视为资源,网络上一切皆资源. REST并没有创 ...

  2. 用Python写一个滑动验证码

    1.准备阶段 滑动验证码我们可以直接用GEETEST的滑动验证码. 打开网址:https://www.geetest.com/ ,找到技术文档中的行为验证,打开部署文档,点击Python,下载ZIP包 ...

  3. 13 IO流(十)——BufferedReader/BufferedWriter 装饰流

    Buffered字符包装流 与Buffered字节装饰流一样,只不过是对字符流进行包装. 需要注意的地方 Buffered字符流在Reader与Writer上有两个新的方法:String readLi ...

  4. xorm -sum 系列方法实例

    求和数据可以使用Sum, SumInt, Sums 和 SumsInt 四个方法,Sums系列方法的参数为struct的指针并且成为查询条件. package main import ( " ...

  5. 【转】基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  6. 当base-package="controller.*"时,可见packageSearchPath为"classpath*:controller/*/**/*.class": 当base-package="controller.**"时,可见packageSearchPath为"classpath*:controller/**/**/*.class":

    今天在配置Spring的component-scan时,发现了一个有趣的问题.就是在指定base-package时,如果使用了星号通配符*,有时会出现类扫描不到的情况.下面研究一下这个问题. 先介绍一 ...

  7. 关于PATCH与PUT的区别

    两者的区别:PATCH:更新部分资源,非幂等,非安全PUT:更新整个资源,具有幂等性,非安全注:幂等性:多次请求的结果和请求一次的结果一样安全性:请求不改变资源状态 举个两者明显区别的例子(我对两者定 ...

  8. node-red 使用 创建第一个流程

    前言 这只是一个简单的示例,具体详细文档去官网查看 官网指南:https://nodered.org/docs/user-guide/ 打开浏览器,进入编辑器页面:http://localhost:1 ...

  9. Core 导出(流和URL两种)

    1.流 2.URL 两种都是使用Epplus 1. EPPlus的基本介绍 EPPlus是一个使用Open Office XML(xlsx)文件格式,能读写Excel 2007/2010 文件的开源组 ...

  10. easy ui 常用控件配置

    table comboBox 下拉高度 panelHeight:'auto' textBox