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. Response知识点小结

    HTTP协议: 1. 响应消息:服务器端发送给客户端的数据 * 数据格式: 1. 响应行 1. 组成:协议/版本 响应状态码 状态码描述 2. 响应状态码:服务器告诉客户端浏览器本次请求和响应的一个状 ...

  2. Android--Facebook Login without LoginButton

    1.引入facebook 工程lib,在Manifest中声明com.facebook.LoginActivity,facebook_app_id <activity android:name= ...

  3. 全栈项目|小书架|服务器开发-NodeJS 中使用 Sequelize 操作 MySQL数据库

    安装 官网:https://sequelize.org/v5/manual/getting-started.html 安装sequelize及数据库连接驱动 npm install --save se ...

  4. 2.5_Database Interface ODBC数据源及案例

    分类 用户数据源 用户创建的数据源,称为“用户数据源”.此时只有创建者才能使用,并且只能在所定义的机器上运行.任何用户都不能使用其他用户创建的用户数据源. 系统数据源 所有用户在Windows下以服务 ...

  5. 导出Excel的2个方法

    导出到Excel的两种方法 第一种: 1.首先创建Excle模板,另存为 “xml”文件.使用记事本等编辑软件打开文件的代码.然后另存为视图文件“Export.cshtml”; 2.控制器操作 pub ...

  6. python 基础(实例1——登陆小游戏)

    一个简单的登陆小游戏,输入用户名和密码,如果和user_passwd.txt中内容匹配,则打印“welcome to login...”,如果三次输入错误则将该用户列入黑名单,无法再用该用户名登陆. ...

  7. 【POJ3613 Cow Relays】(广义矩阵乘法)

    题目链接 先离散化,假设有\(P\)个点 定义矩阵\(A_{ij}\)表示\(i\)到\(j\)只经过一条边的最短路,\[{(A^{a+b})_{ij}=\min_{1\le k\le p} \{ ( ...

  8. 阿里云ssl协议发布qq邮件

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx. ...

  9. karma mocha angular angular-mock 测试

    describe('工具方法测试', function () { var utilsModule; beforeEach(function () { module('Admin'); // modul ...

  10. 蓝牙 BLE 三种 UUID 格式转换

    蓝牙广播中对服务 UUID 格式定义都有三种 16 bit UUID.32 bit UUID.128 bit UUID. 但是熟悉安卓开发的小伙伴都知道接口都 UUID 格式,fromString 时 ...