位置: 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制作训练数据集)

  • 苹果13pro防水吗(苹果手机13防水吗)

    苹果13pro防水吗(苹果手机13防水吗)

  • 华为mate30与电脑连不上是什么原因(华为mate30与电脑连接不能传输文件)

    华为mate30与电脑连不上是什么原因(华为mate30与电脑连接不能传输文件)

  • 怎么使用腾讯课堂上课(怎么使用腾讯课堂上网课)

    怎么使用腾讯课堂上课(怎么使用腾讯课堂上网课)

  • 网盘文件损坏怎么修复(网盘文件已损坏,无法打开)

    网盘文件损坏怎么修复(网盘文件已损坏,无法打开)

  • qq回收站照片永久删了怎么恢复(qq照片回收站里面的照片期限多长)

    qq回收站照片永久删了怎么恢复(qq照片回收站里面的照片期限多长)

  • 华为荣耀6plus怎么设置电量百分比(华为荣耀6plus怎么插卡)

    华为荣耀6plus怎么设置电量百分比(华为荣耀6plus怎么插卡)

  • esc系统故障是什么意思(esc故障怎么办)

    esc系统故障是什么意思(esc故障怎么办)

  • oppor11s尺寸长宽高(oppo r11s长宽)

    oppor11s尺寸长宽高(oppo r11s长宽)

  • iphone合约版什么意思(苹果合约版是什么)

    iphone合约版什么意思(苹果合约版是什么)

  • ipad2反应慢怎么办(ipad2反应慢怎么解决)

    ipad2反应慢怎么办(ipad2反应慢怎么解决)

  • 手机qq手机在线怎么弄(手机qq手机在线模式)

    手机qq手机在线怎么弄(手机qq手机在线模式)

  • 拼多多二级处罚几天(拼多多二级处罚是什么,被处罚了有什么后果?)

    拼多多二级处罚几天(拼多多二级处罚是什么,被处罚了有什么后果?)

  • 淘宝优惠券删除了从哪里可以恢复(怎么把淘宝优惠券删除)

    淘宝优惠券删除了从哪里可以恢复(怎么把淘宝优惠券删除)

  • 怎么把两个视频合成一个视频(怎么把两个视频连接到一起)

    怎么把两个视频合成一个视频(怎么把两个视频连接到一起)

  • 多收多保到期了怎么办(多收多保怎么关闭)

    多收多保到期了怎么办(多收多保怎么关闭)

  • windows10如何设置开机密码(windows10如何设置屏幕保护程序)

    windows10如何设置开机密码(windows10如何设置屏幕保护程序)

  • 在win10中,删除文件提示“该项目不存在”该怎么办?(win10删除所有内容是什么意思)

    在win10中,删除文件提示“该项目不存在”该怎么办?(win10删除所有内容是什么意思)

  • Win11太难用怎么办?手把手教你将Win11变得更顺手(wiwin11)

    Win11太难用怎么办?手把手教你将Win11变得更顺手(wiwin11)

  • 王者荣耀中马可波罗技能有哪些?(王者荣耀中马可波罗的一技能和大招)

    王者荣耀中马可波罗技能有哪些?(王者荣耀中马可波罗的一技能和大招)

  • 布拉塞河上的雾天黎明,英国湖区国家公园 (© fstopphotography/Getty Images)(布拉塞龙图片)

    布拉塞河上的雾天黎明,英国湖区国家公园 (© fstopphotography/Getty Images)(布拉塞龙图片)

  • 【论文笔记】CycleGAN(基于PyTorch框架)(毕业论文笔记怎么写)

    【论文笔记】CycleGAN(基于PyTorch框架)(毕业论文笔记怎么写)

  • 所得税的记账凭证
  • 税控技术服务费280每年都可以抵
  • 房产公司企业所得税如何预征
  • 集体不动产和动产包括
  • 测试收入的钱怎么用
  • 公司给员工购买意外险怎么做账
  • 购买空调算什么费用
  • 汇算清缴的利润表本期数与本年数
  • 企业外部风险包括
  • 收入未确认可以结转成本吗
  • 制造费用工资结转怎么算
  • 电费做其他业务收入的账务处理怎么做?
  • 多计提的工资怎么处理?
  • 存款利率怎么算存一年后的金额
  • 城镇土地使用税的计税依据
  • 跨年多计提社保个人部分怎么调整
  • 企业销售现金折扣
  • 虚开发票的进项税额转出如何做分录?
  • 易票365是哪家公司的
  • 不经常发生应税行为的企业可以选择按小规模纳税人纳税
  • 网上银行转账被骗能追回吗
  • 党建经费如何入账
  • 视同销售的企业所得税汇缴表怎么填列?
  • 测网速中国联通
  • 技术入股分红怎么计算
  • 固定资产要办理什么手续
  • 银行存款日期和起息日期不一样
  • 工程投标保证金最新规定
  • 小规模纳税人税控设备可以抵扣吗设备
  • php读取opc
  • PHP中使用什么关键字声明变量的作用域为全局
  • 空调拆卸安装怎么找师傅
  • 长期挂账的在建工程如何处理
  • 公司土地被政府占用
  • 什么是非征期税未报
  • 微信小程序开发一个多少钱
  • Attentional Feature Fusion 注意力特征融合
  • 无形资产摊销怎么计算月摊销额
  • 银行发行债券流程图
  • python中如何合并csv
  • python 进程管理
  • 给中间人回扣犯罪吗
  • 一般纳税人申请条件
  • 税盘抵扣怎么做分录
  • 股权转让所得如何申报个税
  • sqlserver数据库安装步骤
  • 给子公司注资怎么做账
  • 企业长期零申报
  • 原材料的对应账户有哪些
  • 预期信用损失率的确认依据和过程
  • 建筑行业怎么确认收入
  • 企业用支付宝
  • 银行承兑汇票背面怎么填写
  • 本年利润如何记账
  • 销售包装物计入其他应收款吗
  • 待摊费用会计处理
  • 待报解预算收入给我转了钱是什么意思
  • 发票丢失记账联入账
  • 小型便利店靠什么进行营利
  • 服务企业会计建账流程
  • mysql存储数据的原理
  • mysql存储引擎实现原理
  • win8.1还原系统
  • Win10 Build 10565版Edge浏览器完整更新日志一览
  • linux开机启动ftp
  • win7系统怎样设置
  • Win10 PC RS2快速预览版14926更新与修复内容汇总
  • ghoststartservice.exe是什么进程 有什么作用 ghoststartservice进程查询
  • 在linux系统中,用来存放系统所需要的
  • cocos2dx游戏开发进阶卷这本书怎么样
  • ExtJS扩展 垂直tabLayout实现代码
  • Unity3D游戏开发pdf
  • windows下载安装
  • 一周总结家长寄语
  • python网络爬虫程序
  • js解析机制
  • JQuery中Ajax()的data参数类型实例分析
  • express app.js
  • python saga
  • 地税局网上报税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设