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

  • 个人车辆无偿给公司使用
  • 建筑公司收到预付款怎么开票
  • 递延所得税抵消分录
  • 公司怎么进行网上注册
  • 免税发票是普票还是专票
  • 纳税人与负税人一致的是
  • 注册商标费用计算方法
  • 适用5%征收率的范围
  • 税前利润包含营业税吗
  • 电子商业汇票怎么兑现
  • 工资可以直接进管理费用吗
  • 淘宝买货没有发票
  • 未分配利润期末余额在借方还是贷方
  • 企业租赁个人房屋怎么交税
  • 原始凭证的主要类型
  • 车辆购置税免税申报如何操作
  • 研发费用是否包括增值税
  • 退税后钱到哪里
  • 超出发票使用范围
  • 贸易公司购进原材料会计分录
  • 冲红的电子发票要怎么处理
  • 总账科目和明细科目有哪些
  • 新契税法还有优惠吗?
  • 可以税前扣除的收据有哪些
  • 无车承运人增值税
  • 新注册的公司用不用开公户
  • 高新企业奖励补贴交税吗
  • win10怎么建立多个用户
  • 当期应交所得税怎么计算
  • 分期服务费是啥
  • 加班工资算补贴么
  • 递延收益的会计科目
  • 如何将win11任务栏变小一点
  • 共用水电无法取水怎么办
  • php冒泡法排序
  • 销售商品收到商业汇票一张该笔业务应编制的记账凭证是
  • shine.exe - shine是什么进程 有什么用
  • 我告诉你windows7旗舰版
  • 收到专利补贴的分录
  • 收取逾期包装物押金怎么算税
  • 非货币性资产投资个人所得税
  • 小程序制作平台
  • div css页面布局
  • 卷积神经网络CNN实验报告
  • python单子
  • php如何使用
  • 研发专利什么意思
  • 企业所得税的计算公式三种
  • 研发支出的主要内容
  • 13个点的普票可以抵税吗
  • python初探
  • mongodb 入门
  • 常用的收集数据方法有
  • 食堂购买固定资产会计处理
  • 百旺连接服务器失败,是否使用离线文件进行更新
  • 软件企业增值税计算
  • 开增值税专票要交税吗
  • 个体工商户免费开票额度
  • 汇算清缴是什么
  • 个体户怎么能享受生育险
  • 公户转到老板私户要多久
  • 报关单金额大于出口发票金额
  • 商品预计退回会扣钱吗
  • 红字发票最多几个月
  • 年底本年利润如何处理
  • 股东股权转让印花税 公司承担
  • 工会需要独立建账吗
  • windows server 2008 64位MySQL5.6免安装版本配置方法图解
  • 支持iphone
  • win7系统管理员密码
  • shadersmod
  • perl读取文件内容到数组
  • android判断横竖屏
  • bat批处理命令大全
  • 电子税务局税务数字证书登录
  • 税务局和国税
  • 注销一般户需要基本户的开户许可证吗
  • 工会经费范围税率是多少
  • 划拨土地评估价
  • 税务注销证明样本
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设