useState语法讲解

useState语法讲解

语法定义
const [state, dispatch] = useState(initData)
  • state:定义的数据源,可视作一个函数组件内部的变量,但只在首次渲染被创造。
  • dispatch:改变state的函数,推动函数渲染的渲染函数。dispatch有两种情况-非函数和函数
  • initData:state的初始值,initData有两种情况-非函数和函数。
案例演示
  1. 变量定义
const [count, setCount] = useState('河畔一角');// 更新count
setCount('zhangsan')
  1. 对象定义
const [user, setUser] = useState({ name: '河畔一角', age: 30 });// 更新对象
setUser({...user, age:20})
  1. 数组定义
const [list, setList] = useState(['Tom', 'Jack']);// 更新数组
setList([...list, 'zhangsan'])
  1. 异步执行
const [count, setCount] = useState(0);// 点击按钮,执行三次// 1
setCount(count + 1)
setCount(count + 1)
setCount(count + 1)// 点击按钮,异步执行
setTimeout(()=>{setCount(count + 1)
})
  1. 函数执行
const [count, setCount] = useState(0);// 使用函数更新
setCount(count => count + 1)

Hook开发规则

https://zh-hans.reactjs.org/docs/hooks-rules.html

只在最顶层使用 Hook

不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则,你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useStateuseEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇,我们在下面会有更深入的解释。)

只在 React 函数中调用 Hook

不要在普通的 JavaScript 函数中调用 Hook

  • ✅ 在 React 的函数组件中调用 Hook
  • ✅ 在自定义 Hook 中调用其他 Hook

遵循此规则,确保组件的状态逻辑在代码中清晰可见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/450193.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NSOperation的进阶使用和简单探讨

本文将会从多个方面探讨NSOperation类和NSOperationQueue类的相关内容 一、简介 NSOperation类是iOS2.0推出的,通过NSThread实现的,但是效率一般。 从OS X10.6和iOS4推出GCD时,又重写了NSOperation和NSOperationQueue,NSOperation和NSOperati…

Android应用开发—LayoutParams的用法

Android应用开发—TextView的动态创建 这篇文章讲到了“TextView控件布局位置的控制”,主要依赖于RelativeLayout.LayoutParams的使用,本文简单介绍下LayoutParams的用法 注:本文大部分内容参考android,利用layoutParams代码动态布局空间位置…

廖雪峰Java1-2程序基础-7布尔运算符

布尔运算符 关系运算符&#xff1a;>&#xff0c; >&#xff0c; <&#xff0c; <&#xff0c; &#xff0c;!与运算 &&或运算 |非运算 &#xff01;int n 5;boolean t n > 0;//trueboolean f n < 0;//falseboolean isFive n 5;//trueboolean i…

第二十一届国际C语言混乱代码大赛结果公布

摘要&#xff1a;国际C语言混乱代码大赛&#xff08;IOCCC, The International Obfuscated C Code Contest&#xff09;是一项著名的国际编程赛事&#xff0c;从1984年开始到2006年&#xff0c;每年举办一次。2006年后中止了多年&#xff0c;2011年又开始恢复。比赛的目的是写出…

QuartZ Cron表达式

CronTrigger 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 CronTriggers往往比SimpleTrigger更有用&#xff0c;如果您需要基于日历的概念&#xff0c;而非SimpleTrigger完全指定的时间…

maven02-----Maven项目构建的初次使用

一. 创建Maven项目 1.1 建立一个Hello项目 当然也可以通过java project的方式创建符合Maven约定的目录结果的项目&#xff0c;并手动建立pom.xml文件&#xff0c;但是太繁琐了。因此&#xff0c;这里直接建立maven项目。note: eclipse有内建的maven项目创建功能&#xff0c;倘若…

微软超过苹果 成为全球第一大市值公司

11月23日周五盘中至收盘&#xff0c;微软市值正式超过苹果&#xff0c;成为世界上市值最高的公司。收盘时&#xff0c;微软市值为7533.4亿美元&#xff0c;苹果市值为7468.2亿美元&#xff0c;亚马逊市值为7366.2亿美元&#xff0c;谷歌市值为7255.2亿美元。 上次苹果与微软市值…

创新大赛成就创业梦想 超30%入榜应用获投资意向

摘要&#xff1a;腾讯开放平台宣布移动应用赛区正式开启&#xff0c;新一轮的创业梦想正在成长中。据悉&#xff0c;在腾讯开放平台应用创新大赛中诞生了多款DAU&#xff08;日活跃用户数&#xff09;超百万的应用。小鱼吃吃吃、开心泡泡猫等引领社交游戏潮流&#xff0c;视频达…

如何判断软件架构的好与坏

判断一个软件的架构的好与坏有很多方法&#xff0c;不过如果让我一句话来描述的话&#xff1a; 如果一个软件开发程度在70%以上的情况下&#xff0c;加入一个新功能&#xff0c;还需要涉及到大量的文件&#xff0c;代码的修改&#xff0c;那么这个软件架构一定很烂&#xff0c;…

网关(Gateway)详解

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 网关(Gateway)又称网间连接器、协议转换器。网关在网络层以上实现网络互连&#xff0c;是最复杂的网络互连设备&#xff0c;仅用于两个高…

【重点突破】—— React实现富文本编辑器

前言&#xff1a;富文本编辑器Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器&#xff0c;所见即所得的文本编辑器。 一、安装插件 react-draft-wysiwyg&#xff1a; 文本编辑器插件 draftjs-to-html&#xff1a;文本转换为html的插件 yarn add react-draft-wysiwyg draftj…

1106: 回文数(函数专题)

题目描述 一个正整数&#xff0c;如果从左向 右读&#xff08;称之为正序数&#xff09;和从右向左读&#xff08;称之为倒序数&#xff09;是一样的&#xff0c;这样的数就叫回文数。输入两个整数m和n&#xff08;m<n)&#xff0c;输出区间[m&#xff0c;n]之间的回文数。 …

Ubuntu 12.10 正式发布

Canonical今天正式发布了Ubuntu 12.10版本&#xff0c;代号为“Quantal Quetzal”&#xff0c;意为量子绿咬鹃&#xff0c;绿咬鹃是一种生活在美洲的颜色极为鲜艳的鸟。Ubuntu的版本代号一直都这么奇怪。 在该版本中&#xff0c;改进了Unity桌面环境&#xff0c;弱化了本地应用…

Hibernate中1+N问题以及解决方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. Hibernate中的1N问题描述 在多对一关系中&#xff0c;当我们需要查询多的一方对应的表的记录时&#xff0c;可以用一条sql语句就能…

Android应用开发—通用的GridView网格分割线

注&#xff1a;本文基于 Android RecyclerView 使用完全解析 体验艺术般的控件 中关于GridView网格分割线部分代码扩展而来。 原接口代码&#xff1a; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import andro…

hdfs部署

一、下载Hadoop 2.6.0-cdh5.7.0的tar.gz包并解压&#xff1a; wget http://archive.cloudera.com/cdh5/cdh/5/hadoop-2.6.0-cdh5.7.0.tar.gz tar -zxvf hadoop-2.6.0-cdh5.7.0.tar.gz cd /usr/local/hadoop-2.6.0-cdh5.7.0/ ls bin bin-mapreduce1 cloudera etc examples …

JVM技术周报第2期

JVM技术周报第2期 JVM技术周报分享JVM技术交流群的讨论内容&#xff0c;由群内成员整理归纳而成。如果你有兴趣入群讨论&#xff0c;请关注「Java技术精选」公众号&#xff0c;通过右下角菜单「入群交流」加我好友&#xff0c;获取入群详情。 1、如何阅读源码&#xff1f; 在我…

最长重复子串和最长不重复子串求解

最长重复子串和最长不重复子串求解 本文内容框架&#xff1a; 1 最长重复子串 基本方法、KMP算法求解、后缀数组求解 2 最长不重复子串 基本方法、动态规划、动态规划Hash 3 小结 1最长重复子串 1.1问题描述 首先这是一个单字符串问题。子字符串R 在字符串L 中至少出现两…

sql 查询结果为null替换 为 0

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 mysql : ifnull( xxx , 0 ) select ifnull(colname,0) from tablename oracle: NVL&#xff08;xxx , 0 )