位置: IT常识 - 正文

React Hook - useState函数的详细解析

编辑:rootadmin
React Hook - useState函数的详细解析 useState的详细解析

推荐整理分享React Hook - useState函数的详细解析,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在上一篇文章中, 我用到useState来让大家体验一下hooks函数

import { memo, useState } from "react"const Counter2 = memo(() => { const [counter, setCounter] = useState(100) return ( <div> <h2>当前计数: {counter}</h2> <button onClick={() => setCounter(counter - 1)}>-1</button> <button onClick={() => setCounter(counter + 1)}>+1</button> </div> )})export default Counter2

那么接下来我们来先研究一下上面核心的一段代码代表什么意思

useState来自react,需要从react中导入,是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同;

一般来说,在函数退出后变量就会”消失”,而 state 中的变量会被 React 保留。

useState只有一个参数: 接收一个初始化状态的值(设置初始值),在第一次组件被调用时使用来作为初始化值(如果不设置则默认为undefined);

useState的返回值: 返回一个数组,数组包含两个元素;

元素一: 当前状态的值(第一次调用为初始化值);元素二: 是一个设置状态值变化的函数;不过我们如果总是使用索引来获取这两个元素总是不方便的, 因此在开发中我们通常是会对数组进行解构(当然要取什么名字是自定义的)例如上面代码: const [counter, setCounter] = useState(100)

上面代码中, 点击button按钮后,会完成两件事情:

调用元素二: setCounter,设置一个新的值;

组件重新渲染,并且根据新的值返回DOM结构;

React Hook - useState函数的详细解析

相信通过上面的一个简单案例,你已经会喜欢上Hook的使用了。

Hook 就是 JavaScript 函数,这个函数可以帮助你钩入(hook into) React State以及生命周期等特性;

但是使用它们会有两个额外的规则:

只能在函数组件的顶层调用 Hook。不能在循环语句、条件判断语句或者子函数中调用。

只能在 React 的函数组件和自定义hook中调用 Hook。不能在其他 JavaScript 函数中调用。

Tip

Hook 指的类似于useState、这样的某一个函数

Hooks 是对这一类函数的统称

大家可能有疑惑: 为什么叫 useState 而不叫 createState?

“create” 可能不是很准确,因为 state 只在组件首次渲染 的时候才会被创建。

在下一次重新渲染时,就已经不是创建了, useState 会返回给我们当前所保存的state(如果每次都创建新的变量,它就不是 “state”了)。

这也是 Hook 的名字总是以 use 开头的一个原因, 因为你总是在使用而不是创建。

当然,我们也可以在一个组件中定义多个变量和复杂变量(数组、对象)

import React, { memo, useState } from 'react'const App = memo(() => { // 简单数据 const [counter, setCounter] = useState(10) const [message, setMessage] = useState("Hello World") // 复杂数据 const [banners, setBanners] = useState(["aaa", "bbb", "ccc"]) const [infos, setInfos] = useState({ name: "chenyq", age: 18, height: 1.88 }) function changeNumber() { setCounter(counter + 1) } return ( <div> <h2>{counter}</h2> <button onClick={changeNumber}>+1</button> <h2>{message}</h2> <h2>{banners}</h2> <h2>{infos.name}-{infos.age}-{infos.height}</h2> </div> )})export default App
本文链接地址:https://www.jiuchutong.com/zhishi/300172.html 转载请保留说明!

上一篇:Vue —— watch和watchEffect的区别(vue watch和computed)

下一篇:OpenPCDet 训练自己的数据集详细教程!(opencv制作训练数据集)

  • 剪映如何添加文字(剪映如何添加文字解说)

    剪映如何添加文字(剪映如何添加文字解说)

  • 微信怎么把群主的位置让给别人(微信怎么把群主转给别人)

    微信怎么把群主的位置让给别人(微信怎么把群主转给别人)

  • QQ怎么关掉个性签名(qq怎么关掉个性签名和说说同步)

    QQ怎么关掉个性签名(qq怎么关掉个性签名和说说同步)

  • 荣耀20青春版与华为畅享10对比(荣耀20青春版与荣耀20s对比)

    荣耀20青春版与华为畅享10对比(荣耀20青春版与荣耀20s对比)

  • iphone11摄像头旁边的小孔(iphone11摄像头旁边的白色是什么)

    iphone11摄像头旁边的小孔(iphone11摄像头旁边的白色是什么)

  • 网易云怎么下载音乐(网易云怎么下载歌曲)

    网易云怎么下载音乐(网易云怎么下载歌曲)

  • 华为手机微信背景变黑色了怎么办(华为手机微信背景突然变成黑色了怎么办)

    华为手机微信背景变黑色了怎么办(华为手机微信背景突然变成黑色了怎么办)

  • 易考通客户端打不开(易考通打不开怎么办)

    易考通客户端打不开(易考通打不开怎么办)

  • vivonex手机充不进去电是什么原因(vivonex充电充不进)

    vivonex手机充不进去电是什么原因(vivonex充电充不进)

  • oppo强制恢复出厂还是要密码怎么办(oppo强制恢复出厂忘记锁屏密码)

    oppo强制恢复出厂还是要密码怎么办(oppo强制恢复出厂忘记锁屏密码)

  • 打印机不能连续打印只能打一张(打印机不能连续打印怎么解决)

    打印机不能连续打印只能打一张(打印机不能连续打印怎么解决)

  • 苹果11充电口进水了怎么办(苹果11充电口进水了可以用吹风机吹吗)

    苹果11充电口进水了怎么办(苹果11充电口进水了可以用吹风机吹吗)

  • 苹果11开热点为什么安卓手机连不了(苹果11开热点为什么找不到)

    苹果11开热点为什么安卓手机连不了(苹果11开热点为什么找不到)

  • al键是干什么用的(alpha键是什么意思)

    al键是干什么用的(alpha键是什么意思)

  • 什么叫固定到开始屏幕(固定バイブだるまさん)

    什么叫固定到开始屏幕(固定バイブだるまさん)

  • 微信发哪些文字会有特效(微信发哪些文字会有特效2023)

    微信发哪些文字会有特效(微信发哪些文字会有特效2023)

  • 抖音怎么切换自拍镜像(抖音怎么切换自己的ip地址)

    抖音怎么切换自拍镜像(抖音怎么切换自己的ip地址)

  • 笔记本连不到手机热点(笔记本连接不到手机)

    笔记本连不到手机热点(笔记本连接不到手机)

  • 快手怎么隐藏发布时间(快手怎么隐藏发布的作品)

    快手怎么隐藏发布时间(快手怎么隐藏发布的作品)

  • vivox9s怎样找回删除的照片(vivo手机怎样找回)

    vivox9s怎样找回删除的照片(vivo手机怎样找回)

  • 为什么苹果订阅里面没有取消(为什么苹果订阅打不开)

    为什么苹果订阅里面没有取消(为什么苹果订阅打不开)

  • 若依:如何去掉首页,设置登录后跳转到第一个路由菜单(怎么样去掉)

    若依:如何去掉首页,设置登录后跳转到第一个路由菜单(怎么样去掉)

  • 保证人不承担责任(胜诉案例)
  • 计提城市维护建设费和教育费附加的会计分录
  • 运输服务的增值税是多少
  • 生产经营所得税怎么申报
  • 房地产企业被收购报表处理
  • 应收留抵税额退税款科目是资产类
  • 河道维护中心职责
  • 咨询服务费是否可以税前扣除
  • 一般纳税人17%增值税发票按12%核算如何进行账务处理?
  • 取得增值税专用发票是否可以抵扣
  • 广告位租赁合同要交印花税吗
  • 本月出口下月开发票可以吗
  • 专用发票第一次怎么开
  • 折价股权转让账务处理
  • 餐厨垃圾处理有哪些设备
  • 刚成立的工业企业如何具体设计和考虑成本项目处理?
  • 代收代付业务怎么交税
  • 合伙企业是怎样分红的
  • quickres.exe - quickres是什么进程 作用是什么
  • Linux系统怎么设置常亮
  • 如何启用系统引擎
  • 进项税额转出会计分录福利费
  • 小米mini路由器mesh
  • 出口信用保险补贴算不算政府补助
  • vue经典案例
  • 增值税专用发票丢了怎么补救
  • vue运行报错
  • “从零开始”
  • 公司投资资金
  • 微信小程序开发公司
  • 选择器优先级
  • open开放的意思吗
  • python 批量
  • 横看成横看成岭侧成峰的下一句
  • 哈希表散列函数
  • 机动车发票冲红太多会怎么样
  • 计入资本公积的金额怎么算
  • 固定资产处置营业外支出
  • 公司收不到的账款而发不出去怎么办
  • sql server安装出现值不能为null
  • 出口免抵增值税税率
  • 信息技术服务增值税税负率是多少
  • 公司购车需要什么材料
  • 计提坏账准备的方法
  • 餐饮营业收入怎么算
  • 国有资产无偿划转需要缴税吗
  • 企业弥补亏损的会计分录
  • 公司收到生育津贴不给员工
  • sqlserver数据库中进行查询所使用的语言为
  • 其他应付款的辅助科目是什么
  • 个人所得税如何计算
  • 研发费用是否包含增值税
  • 预借备用金的会计分录
  • 转账错误退款说明
  • 厂房出租租金收税吗
  • 合伙企业有限合伙
  • 工程维修款是从工程款中扣除吗
  • 收到的业务赔偿如何入账
  • 融资手续费计入什么成本
  • 期初建帐
  • 政府会计资产处置损益
  • 数据库语言主要有哪几种
  • sqlserver获取表结构
  • sqlserver数据类型怎么用
  • ghost重装步骤
  • ubuntu 9.04 X3100 显卡开启3D特效
  • mac计算器怎么用
  • 在linux系统中
  • unix2dos linux实现
  • 升级linux版本
  • 安卓注入工具
  • express sendfile
  • dos测试网络连接
  • python中2和2.0的区别
  • javascript框架库升级
  • list在python中的作用
  • javascript中Date format(js日期格式化)方法小结
  • javascript 数组删除
  • 湖南社保费申报测算管理系统登录不了
  • 河南省电子票据查询平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设