react 中的hooks中的useState

(1). State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
(2). 语法: const [xxx, setXxx] = React.useState(initValue)  
(3). useState()说明:
        参数: 第一次初始化指定的值在内部作缓存
        返回值: 包含2个元素的数组, 第1个为内部当前状态值, 第2个为更新状态值的函数
(4). setXxx()2种写法:
        setXxx(newValue): 参数为非函数值, 直接指定新的状态值, 内部用其覆盖原来的状态值
        setXxx(value => newValue): 参数为函数, 接收原本的状态值, 返回新的状态值, 内部用其覆盖原来的状态值

import React from 'react'

export default function Hookuse() {
  //数组中第一个参数,是后面的值,第二个参数是改变值的方法
  const [num,setnum] = React.useState(0)
  const [name,setName] = React.useState('小米')
  // console.log(num,usenum,'num,usenum')
  return (
    <div>
      {num}
      {name}
      <button onClick={bck}>点击加</button>
    </div>
  )
  function bck(){
    //第一种方式
    // setnum(num + 20)
    //第二种方式(第一个参数是原来的值,返回一个新值)
    setnum(num =>num +20)
    console.log('bck');
    setName('小李')
    setName((a)=> a + 1)
  }
}

有两种方式,第一种方式直接写值,第二种方式(第一个参数是原来的值,第二个参数返回一个新的值)

  function bck(){
    //第一种方式
    setnum(num + 20)
    //第二种方式(第一个参数是原来的值,返回一个新值)
    setnum(num =>num +20)

    setName('小李')

    setName((a)=> a + 1)
  }

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于SSD1306的OLED的显示的研究

文章目录 函数作用参数解释嵌套函数分析主代码分析逻辑流程总结 难点的解析&#xff1a;生成器的主要逻辑分解&#xff1a;每次生成的元组 (pixel_x, pixel_y, pixel_mask)&#xff1a;生成器的整体流程举例总结 反转后的文本绘制竖直布局有问题的旋转180度旋转坐标轴绘制矩形绘…

Chromium form表单post提交过程分析c++

form表单get提交参考之前文章Chromium 前端form表单提交过程分析c-CSDN博客 一、表单post提交测试例子&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title> </head&…

【火山引擎】AIGC图像风格化 | 风格实践 | PYTHON

目录 1 准备工作 2 实践 代码 效果图 1 准备工作 ① 服务开通 确保已开通需要访问的服务。您可前往火山引擎控制台,在左侧菜单中选择或在顶部搜索栏中搜索需要使用的服务,进入服务控制台内完成开通流程。

TWS蓝牙耳机发展史

目录 1&#xff1a;人类历史第一副耳机 2&#xff1a;第一台手持式耳机 3&#xff1a;第一台头戴式耳机 4&#xff1a;第一台动圈式耳机 5&#xff1a;第一台立体声耳机 6&#xff1a;第一台压耳式耳机 7&#xff1a;随身听 8&#xff1a;商用降噪耳机 9&#xff1a;i…

数据结构7——二叉树的顺序结构以及堆的实现

在上篇文章数据结构6——树与二叉树中&#xff0c;我们了解了树和二叉树的概念&#xff0c;接着上篇文章&#xff0c;在本篇文章中我们学习二叉树顺序结构的实现。 目录 1. 二叉树的顺序存储结构 2. 堆的概念及结构 1. 堆的概念 2. 堆的结构 3. 堆的实现 1. 堆节点 2. 交…

《献给阿尔吉侬的花束》

这是看过的错别字最多的一本书&#xff0c;错别字多并不是这本书的缺点&#xff0c;反而是一个亮点。全书以“近步抱告”的形式讲述了想变“聪明”的查理的故事。很治愈&#xff0c;也很虐心。聪明有聪明的代价&#xff0c;看到的感受到的越多&#xff0c;需要强大的内心去承受…

LeetCode 精选 75 回顾

目录 一、数组 / 字符串 1.交替合并字符串 &#xff08;简单&#xff09; 2.字符串的最大公因子 &#xff08;简单&#xff09; 3.拥有最多糖果的孩子&#xff08;简单&#xff09; 4.种花问题&#xff08;简单&#xff09; 5.反转字符串中的元音字母&#xff08;简单&a…

高性能 JSON 处理:为何选择 Fastjson?

一、关于Fastjson 1.1 简介 Fastjson 是由阿里巴巴集团开发的一个高性能的 JSON 处理库&#xff0c;它支持 Java 对象与 JSON 字符串之间的互相转换。Fastjson 自 2011 年发布以来&#xff0c;以其卓越的性能和丰富的功能在 Java 社区中获得了广泛的应用。 Alibaba Fastjson:…

RabbitMQ系列学习笔记(九)--路由模式

文章目录 一、路由模式原理二、多重绑定三、路由模式实战1、消费者代码2、生产者代码3、运行结果分析 本文参考 尚硅谷RabbitMQ教程丨快速掌握MQ消息中间件rabbitmq RabbitMQ 详解 Centos7环境安装Erlang、RabbitMQ详细过程(配图) 一、路由模式原理 使用发布订阅模式时&#x…

C++ -string -常见用法5

博客主页&#xff1a;【夜泉_ly】 本文专栏&#xff1a;【C】 欢迎点赞&#x1f44d;收藏⭐关注❤️ 文章目录 &#x1f4a1;前言&#x1f4a1;非成员函数1.operator1.1函数原型1.2使用1.3注意 2.relational operators3.swap4.operator>>5.operator<<6.operator<…

Javascript算法(滑块窗口、螺旋矩阵)

滑块窗口 JS滑块窗口算法&#xff0c;即滑动窗口算法&#xff08;Sliding Window&#xff09;&#xff0c;在JavaScript中的应用场景主要集中在处理字符串和数组等数据结构中的子串或子数组问题。这种算法通过维护一个窗口&#xff0c;并移动窗口的两个边界&#xff08;左右指…

Linux命令进阶·vi\vim编辑器详细命令介绍

目录 1. 什么是 vim&#xff1f; 2. vi\vim 模式介绍 2.1 命令模式&#xff08;Command mode&#xff09; 2.2 输入模式&#xff08;Insert mode&#xff09; 2.3 底线命令模式&#xff08;Last line mode&#xff09; 3. vi\vim 的使用 4. 命令介绍 1. 什么是 …

微信小程序-自定义组件

文章目录 微信小程序-自定义组件概述创建和使用数据、方法和属性slot 插槽默认插槽具名插槽 组件样式注意项样式隔离 数据监听组件间通信父传子子传父获取子组件实例 生命周期组件的生命周期组件所在页面的生命周期App、Page与Component生命周期对比冷启动保留当前页面和关闭当…

诺奖印证产业方向,AI先行者晶泰科技开拓黄金赛道

2024年诺贝尔奖揭晓的各奖项中&#xff0c;AI领域无疑成为“最大赢家”。 从诺贝尔物理学奖被授予两名AI科学家&#xff0c;到诺贝尔化学奖表彰三位科学家“用人工智能&#xff08;AI&#xff09;破译蛋白质的密码”&#xff0c;本届诺贝尔奖“含AI量”之高引起市场热议。 值…

如何将 Elasticsearch 与流行的 Ruby 工具结合使用

作者&#xff1a;来自 Elastic Fernando Briano 了解如何将 Elasticsearch 与一些流行的 Ruby 库一起使用。 在这篇博文中&#xff0c;我们将介绍如何将 Elasticsearch 与一些流行的 Ruby 工具结合使用。我们将实现 Ruby 客户端 “入门”指南 中介绍的常用 API。如果你点击该链…

【从零开发Mybatis】引入XNode和XPathParser

引言 在上文&#xff0c;我们发现直接使用 DOM库去解析XML 配置文件&#xff0c;非常复杂&#xff0c;也很不方便&#xff0c;需要编写大量的重复代码来处理 XML 文件的读取和解析&#xff0c;代码可读性以及可维护性相当差&#xff0c;使用起来非常不灵活。 因此&#xff0c…

深度学习:对评论信息的情感分析,建立模型,自动识别评论信息的情绪状态完整代码实现

评论 思考&#xff1a;向模型中传递数据时&#xff0c;需要提前处理好数据 1、目标&#xff1a;将评论内容转换为词向量。 2、每个词/字转换为词向量长度(维度)200 3、每一次传入的词/字的个数是否就是评论的长度? 应该是固定长度&#xff0c;每次传入数据与图像相似…

DIY我的世界磁力方块

引子 小朋友喜欢我的世界&#xff0c;就像当年我那代对俄罗斯方块的执着&#xff0c;考虑电子游戏伤眼睛&#xff0c;所以最近开始给小朋友买磁力方块。 一个将近1元多的价格&#xff0c;催生我DIY的念头。 正文 Freecad图&#xff0c;A,B,C,D处 放磁铁 5.14g 材料费 最后的成…

Axure中继器单选、多选和重置

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;Axure中继器单选、多选和重置 主要内容&#xff1a;根据查询条件&#xff0c;通过单选、多选和重置&#xff0c;从中继器中得到数据 应用场景&…

DockerCompose快速部署Java项目、nginx前端和mysql数据库到centos虚拟机

简介&#xff1a;整理自&#xff1a;SpringCloud微服务开发与实战&#xff0c;java黑马商城项目微服务实战开发&#xff08;涵盖MybatisPlus、Docker、MQ、ES、Redis高级等&#xff09;课程的飞书文档。 DockerCompose介绍 大家可以看到&#xff0c;我们部署一个简单的java项…