[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变量发生 ...
随机推荐
- pycharm爬取网页数据
1 python环境的配置 1.1 安装python文件包,放到可以找到的位置 1.2 右键计算机->属性->高级环境设置->系统变量->Path->编辑->复制p ...
- Java date日期类型,结束日期减去开始日期求两者时间差,精确到秒
/** * @Author: * @Description: * @Date: 2019/4/10 19:01 * @Modified By: */ @Slf4j public class DateU ...
- C#中Unity对象的注册方式与生命周期解析
1.示例代码 请详细阅读 static void Main(string[] args) { { Console.WriteLine("----------全局设置----------&qu ...
- python之(TensorFlow)深度学习
一.深度学习(DL, Deep Learning)是机器学习(ML, Machine Learning)领域中一个新的研究方向,它被引入机器学习使其更接近于最初的目标——人工智能(AI, Artifi ...
- java之struts2的action优化配置
当一个Action处理类中处理多个业务时,action的配置 文件将会急剧增加,导致配置文件很臃肿的问题. struts2提供了两种方案来解决这个问题.一种是动态方法调用,另一种是使用通配符来配置Ac ...
- Linux ass2srt
Linux ass2srt bash script #! /usr/bin/env bash ] then echo "USAGE: $0 <directory> <fro ...
- python 直角图标生成圆角图标
参考链接:https://stackoverflow.com/questions/11287402/how-to-round-corner-a-logo-without-white-backgroun ...
- java第三次面试总结
这次面试是二面,由于自己的经验不足,面试的结果不是很令人满意,所以与这家公司失之交臂,在这里记录一下经历,吸取教训. 之前的一面是笔试+面试,面试是主管,今天的面试是总监.在前台招待我的时候,还跟我说 ...
- sqlite 一些常用的句子
有关SQLITE最完整的操作语句参考资料,应当是官方网址的http://www.sqlite.org/lang.html这个地方. select max(id) from table 取最大id ...
- text-overflow 全兼容
text-overflow 全兼容 text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.比起在后台用程序截断文本再附上省略标记的做法,用CSS来 ...