当前位置: 首页 > news >正文

React hooks之useState用法(一)

系列文章目录

学习React已经有很长的一段时间了,今天决定重新回顾一下跟React相关的一些知识点


文章目录

  • 系列文章目录
    • 结构如下
  • 一、hooks是什么?useState可以能做什么
  • 二、如何使用useState()
    • 第一步:创建【函数组件(无状态组件)】
      • 函数组件(Child)代码如下:
    • 第二步:引入useState
      • 代码如下
    • 第三步:声明状态数据
      • 代码如下
      • tableColumns 的数据
    • 第四步:渲染并修改Table数据
      • 代码如下
      • 结果图如下:
        • 初始渲染图如下:
        • 点击按钮后的渲染图如下:
  • 三、代码解释如下图所示
    • 主体代码
  • 四、总结


结构如下

本文讲述的主要内容如下:

1、useState是什么?
2、useState能做什么?
3、useState的使用场景都有哪些?


一、hooks是什么?useState可以能做什么

1.Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
2.useState是Hook中的一员,主要是用来在【无状态组件(函数组件)】声明可修改的状态的 一个Api

二、如何使用useState()

第一步:创建【函数组件(无状态组件)】

React 提供的Hooks的Api主要的是为了节省开发者的代码书写量,同时也对 函数组件的功能进行了拓展!!

函数组件(Child)代码如下:

import React from "react";
import './index.css';//这里引入了Ant Design React 组件
import { Space, Table, Tag, Button } from 'antd';export default function Child() {//这里引入了Ant Design React 组件return <Space> </Space>
}

第二步:引入useState

代码如下

import React, { useState } from "react";

第三步:声明状态数据

代码如下

   const [tableData, setTableData] = useState([{ age: 1, name: 'xioatian', height: 123 }])//这里是我导入的外部的一个tableColumnsconst [tableColumn] = useState(tableColumns)

tableColumns 的数据

export const tableColumns = [{title: "姓名",dataIndex: "name",key: "name",},{title: "年龄",dataIndex: "age",key: "age",},{title: "姓名",dataIndex: "height",key: "height",},
];

第四步:渲染并修改Table数据

代码如下

import React, { useState, useEffect } from "react";
import './index.css';
import { Space, Table, Tag, Button } from 'antd';
import { tableColumns } from "./dataScource";export default function Child() {//定义了 tableData 数据。 setTableData修改方法const [tableData, setTableData] = useState([{ age: 1, name: 'xioatian', height: 123 }])//定义了 tableColumn 数据。(tableColumns是外部导入的)const [tableColumn] = useState(tableColumns)return <Space>//此处是设置了一个点击事件,点击后触发setTableData方法修改数据<Button onClick={() => { setTableData([{ name: '123', age: 3, height: 0 }]) }}>点击我修改Table数据</Button><Table style={{ width: '600px' }} columns={tableColumn} dataSource={tableData}></Table></Space>
}

结果图如下:

初始渲染图如下:

在这里插入图片描述

点击按钮后的渲染图如下:

在这里插入图片描述

三、代码解释如下图所示

主体代码

在这里插入图片描述

四、总结

useState用法非常的 So Easy!!!!!!!!!!💪💪💪
后续更新,useState更新慢的问题

相关文章:

React hooks之useState用法(一)

系列文章目录 学习React已经有很长的一段时间了&#xff0c;今天决定重新回顾一下跟React相关的一些知识点 文章目录系列文章目录结构如下一、hooks是什么&#xff1f;useState可以能做什么二、如何使用useState&#xff08;&#xff09;第一步&#xff1a;创建【函数组件&…...

spring的简单理解

目录 1 .ioc容器&#xff08;控制反转&#xff09; 2. Aop面向切面编程 3. 事务申明 4. 注解的方式启动 5. spring是什么与他的优势 6. 代理设计模式&#xff08;比如aop&#xff09; 7. springmvc中相应json数据 8. 使用lombok来进行对代码的简化 9. 使用logback记录…...

Docker调用Intel集显实现FFmpeg硬解码

文章目录Docker调用Intel集显实现FFmpeg硬解码参考FFmpeg 集成qsv方式一 容器完成所有步骤方式二 容器完成部分步骤方式三 dockerfile部署Docker调用Intel集显实现FFmpeg硬解码 参考 ffmpeg_qsv_docker拉取该镜像可以实现FFmpeg集成vaapi的硬加速&#xff0c;通过dockerfile文…...

端到端模型(end-to-end)与非端到端模型

一、端到端&#xff08;end to end&#xff09; 从输入端到输出端会得到一个预测结果&#xff0c;将预测结果和真实结果进行比较得到误差&#xff0c;将误差反向传播到网络的各个层之中&#xff0c;调整网络的权重和参数直到模型收敛或者达到预期的效果为止&#xff0c;中间所…...

uniApp封装一个滑块组件

最近 项目中有一个需求 PC端动态设计的表单 移动端要能渲染出来 那么 就要去找到对应的组件 而其中 没有的 就包括滑块 没有又能怎么办 只能自己封装一个 我们直接上代码 <template><view class"u-slider" tap"onClick" :class"[disabled…...

运动基元(二):贝塞尔曲线

贝塞尔曲线是我第一个深入接触并使用于路径规划的运动基元。N阶贝塞尔曲线具有很多优良的特性,例如端点性、N阶可导性、对称性、曲率连续性、凸包性、几何不变性、仿射不变性以及变差缩减性。本章主要介绍贝塞尔曲线用于运动基元时几个特别有用的特性。 一、贝塞尔曲线的定义 …...

Android 11.0 关于Launcher3中调用截图功能总是返回null的解决方案

1.1概述 在11.0的系统产品开发中,在某些时候需要调用截图接口来进行截屏功能实现,而在Launcher3中发现调用系统截屏接口SurfaceControl.screenshot进行截图的时候始终为null, 获取不到系统当前页面的截屏功能,所以需要找到当前截屏失败的原因然后来实现截屏功能的实现,下面来…...

random随机数

random随机数 1.概述 random用来生成一些随机数&#xff0c;下面介绍random模块提供的方法根据需求生成不同的随机数。 2.random常用操作 2.1.random默认随机数 random()函数返回一个随机的浮点值&#xff0c;默认返回值范围在0 < n < 1.0区间 import randomfor i …...

【金三银四系列】Spring面试题-上(2023版)

Spring面试专题 1.Spring应该很熟悉吧&#xff1f;来介绍下你的Spring的理解 有些同学可能会抢答&#xff0c;不熟悉!!! 好了&#xff0c;不开玩笑&#xff0c;面对这个问题我们应该怎么来回答呢&#xff1f;我们给大家梳理这个几个维度来回答 1.1 Spring的发展历程 先介绍…...

linux基本功系列之tar命令实战

文章目录前言一. tar命令介绍二. 语法格式及常用选项三. 参考案例3.1 仅打包不压缩3.2 打包后使用调用压缩命令进行压缩3.3 列出文件的内容3.4 追加文件到tar命令中3.5 释放文件到指定的目录四 . 各种压缩方式的比较总结前言 大家好&#xff0c;又见面了&#xff0c;我是沐风晓…...

Prometheus服务发现

Prometheus服务发现介绍 Prometheus默认是采用pull的方式拉取监控数据的&#xff0c;每一个被抓取的目标都要暴露一个HTTP接口&#xff0c;prometheus通过这个接口来获取相应的指标数据&#xff0c;这种方式需要由prometheus-server决定采集的目标服务器有哪些&#xff0c;通过…...

【Spring6源码・MVC】请求处理流程源码解析

上一篇《【Spring6源码・MVC】初始化registry&#xff0c;完成url和controller的映射关系》我们知道&#xff0c;在IOC容器加载的同时&#xff0c;初始化了registry这个HashMap&#xff0c;这个HashMap中存放了请求路径和对应的方法。当我们请求进来&#xff0c;会通过这个regi…...

elasticsearch term match 查询

1. 准备数据 PUT h1/doc/1 {"name": "rose","gender": "female","age": 18,"tags": ["白", "漂亮", "高"] }PUT h1/doc/2 {"name": "lila","gender&quo…...

canal使用说明:MySQL、Redis实时数据同步

1. canal简介 canal是阿里开源的数据同步工具&#xff0c;基于bin log可以将数据库同步到其他各类数据库中&#xff0c;目标数据库支持mysql,postgresql,oracle,redis,MQ,ES等 canal分成服务端deployer和客户端adapter&#xff0c;我们可以部署多个&#xff0c;同时为了方便管…...

计算机视觉框架OpenMMLab开源学习(三):图像分类实战

前言&#xff1a;本篇主要偏向图像分类实战部分&#xff0c;使用MMclassification工具进行代码应用&#xff0c;最后对水果分类进行实战演示&#xff0c;本次环境和代码配置部分省略&#xff0c;具体内容建议参考前一篇文章&#xff1a;计算机视觉框架OpenMMLab开源学习&#x…...

awk命令

一.介绍 awk是专门为文本处理设计的编程语言&#xff0c;是一门数据驱动的编程语言。与sed类似&#xff0c;都是以数据驱动的行处理软件&#xff0c;主要用于数据扫描&#xff0c;过滤和汇总。数据可以来自于标准输入&#xff0c;管道或者文件。 二.语法 awk是一种处理文本文件…...

LocalDateTime获取时间的年、月、日、时、分、秒、纳秒

如何把String/Date转成LocalDateTime参考String、Date与LocalDate、LocalTime、LocalDateTime之间互转 String、Date、LocalDateTime、Calendar与时间戳之间互相转化参考String、Date、LocalDateTime、Calendar与时间戳之间互相转化 方法介绍 getYear() 获取日期的年 getMon…...

MoveIT Rviz和Gazebo联合仿真

文章目录环境安装概述ros_control框架ros_control数据流文件配置附加工具故障问题解决参考接前两篇&#xff1a;ROS MoveIT1&#xff08;Noetic&#xff09;安装总结 Solidworks导出为URDF用于MoveIT总结&#xff08;带prismatic&#xff09; MoveIT1 Assistant 总结 环境 Ubu…...

ESP32S2(12K)-DS18B20数码管显示温度

一、物料清单: NODEMCU-32-S2 (ESP32-12K)四段数码管(共阴)DS18B20(VCC/DQ/GND)Arduino-IDE 2.0.3二、实现方法及效果图: 2.1 引用库 // #include <OneWire.h> //可以不引入,因为DallasTemperature.h中已经引入了OneWire.h #include <DallasTemperature.h>#…...

linux栈溢出定位

一、编译选项定位堆栈溢出 来源&#xff1a;堆栈溢出检测机制 - SkrSky - 博客园 1、栈溢出可能打印 unhandled level 1 translation fault (11) at 0x7f8d0347, esr 0x92000005 2、栈溢出保护机制 gcc提供了栈保护机制stack-protector&#xff08;编译选项-fstack-protec…...

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

网络编程(UDP编程)

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

听写流程自动化实践,轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

实战设计模式之模板方法模式

概述 模板方法模式定义了一个操作中的算法骨架&#xff0c;并将某些步骤延迟到子类中实现。模板方法使得子类可以在不改变算法结构的前提下&#xff0c;重新定义算法中的某些步骤。简单来说&#xff0c;就是在一个方法中定义了要执行的步骤顺序或算法框架&#xff0c;但允许子类…...

智能职业发展系统:AI驱动的职业规划平台技术解析

智能职业发展系统&#xff1a;AI驱动的职业规划平台技术解析 引言&#xff1a;数字时代的职业革命 在当今瞬息万变的就业市场中&#xff0c;传统的职业规划方法已无法满足个人和企业的需求。据统计&#xff0c;全球每年有超过2亿人面临职业转型困境&#xff0c;而企业也因此遭…...

TJCTF 2025

还以为是天津的。这个比较容易&#xff0c;虽然绕了点弯&#xff0c;可还是把CP AK了&#xff0c;不过我会的别人也会&#xff0c;还是没啥名次。记录一下吧。 Crypto bacon-bits with open(flag.txt) as f: flag f.read().strip() with open(text.txt) as t: text t.read…...