react之useState详解

在这里插入图片描述

1. 为什么要用useState?

  • 它是React 16.8 的新特性,我们在React里面一般都是用Class去写组件,但是有时候会发现不用它更方便,但是问题来了:不用Class的时候,数据的状态改变如何存储呢?
  • 如果你用 var,let,const 等等,你会发现:值虽然改变了,但是页面并没有重新渲染,也就是说,这些关键字定义的值并不是响应式的
  • 这个时候,就轮到 useState 上场了,它允许我们定义状态变量,并且能保证在页面上能重新渲染,数据是响应式的。

2. 基本语法

const [state, setState] = useState(initialState);
  • state => 存储的状态值
  • setState => 用来修改状态的函数
  • initialState => 首次渲染的初始值
  • 比如 useState 返回一个数组,长度为 2
// 通常使用的定义方法
const [key, setKey] = useState(0);
// 但是怕大家不好理解,所以也可以拆开,如下:
const keyArr = useState(0);
const key = keyArr[0];
const setKey = keyArr[1];

3. 实践案例

const initData = [{imgSrc: '',contentStr: '第一条评论',},{imgSrc: '',contentStr: '第二条评论',},{imgSrc: '',contentStr: '第三条评论',},
];
import { useState, useEffect } from "react";
// useEffect  用于监听数据变化,不要也可以的
const BuyComment = () => {// 带入初始值const [dataList, setDataList] = useState(initData);// 重点在这里// 往数组里添加数据const addRule = () => {let obj = {imgSrc: [],contentStr: '新的评论',};// 有深拷贝的必要,防止数据出问题const addItems = JSON.parse(JSON.stringify(dataList));addItems.push(obj);// 在这里完成值的修改setDataList(addItems);};return (<div>{dataList.map((item, i) => {return (<div className={styles.mianBorder} key={i}>{item.contentStr}</div>);})}<div className={styles.addDiv}><span className={styles.addCom} onClick={addRule}>+ 添加评论</span></div></div>)
};
// 用于监听数据变化的
useEffect(() => {console.log(dataList);
}, [dataList]);
export default BuyComment;
  • 做完以上的步骤,点击 添加评论 就会发现数据同步更改了。

4. useState 的惰性初始化

  • useState 初始值是支持惰性初始化的,所以我们可以传递一个函数给它。
  • 这个函数会在组件第一次渲染的时候执行,当然,后续的渲染就不会执行了。
  • 之所以有这个特性,是为了优化性能。因为有时候我们会遇到非常庞大的数据处理,可能还要进行深拷贝,这些操作还是很耗性能的,如果每次组件渲染的时候都会执行,那代价是很大的,但又不是必须的,所以 useState 的优点就体现出来了:只执行一次,大大的减少了操作的性能和代价。
// 假设这里数据量非常大:jsonObj,我们需要对它进行解析,计算等等操作
const jsonObj = "{...}"; // 可能是一个很大的js 对象 或者json字符串function DemoComponent() {const [data, setData] = useState(() => {console.log("执行了")// 这种深拷贝是很耗性能的,所以我们在这里先把数据处理好,并且只处理一次return JSON.parse(JSON.stringify(jsonObj ));});
}
  • 上面的代码中,打印只会执行一次。
  • 避免重复的操作,提高代码性能。

1. 希望本文能对大家有所帮助,如有错误,敬请指出

2. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)
3. 拜谢各位!后续将继续奉献优质好文
4. 如果存在疑问,可以私信我(主页有Q)

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据结构-堆详解

堆 图片&#xff1a; 二叉堆的父节点为这个子树的最值。 如何维护它。 我们发现它是一棵二叉树&#xff0c;那就自然满足若父节点为 x x x 则左儿子节点为 x 2 x\times2 x2 右儿子为 x 2 1 x\times 2 1 x21 这是显然的&#xff0c;但如果写成指针或结构体就太麻烦了&…

Redis的特性与安装

回顾 Redis是一个在内存中存储数据的中间件&#xff0c;可以用来当数据库用&#xff0c;也可以作为缓存用(这里的缓存往往是对数据库缓存)。 中间件&#xff1a;和业务无关的服务&#xff0c;功能更加通用&#xff0c;如&#xff1a;数据库&#xff0c;缓存&#xff0c;消息队…

【笔试强训】Day1 --- 数字统计 + 两个数组的交集 + 点击消除

文章目录 1. 数字统计2. 两个数组的交集3. 点击消除 1. 数字统计 【链接】&#xff1a;数字统计 解题思路&#xff1a;模拟&#xff0c;利用数学知识&#xff0c;计算每个数字中2出现的个数。&#xff08;这里也可以将数字转换成字符串来统计字符’2’出现的个数&#xff09…

如何使用Flask搭建web程序框架并实现无公网IP远程访问本地程序

文章目录 前言1. 安装部署Flask并制作SayHello问答界面2. 安装Cpolar内网穿透3. 配置Flask的问答界面公网访问地址4. 公网远程访问Flask的问答界面 前言 Flask是一个Python编写的Web微框架&#xff0c;让我们可以使用Python语言快速实现一个网站或Web服务&#xff0c;本期教程…

bonding原理分析和问题排查

bonding原理 发送端&#xff1a; 使用网卡bond3模式&#xff08;广播模式BOND_MODE_BROADCAST&#xff09;将报文从两个网卡同时发出&#xff0c;无需修改报文。 接收端&#xff1a; 根据发送节点时间的链路通断状态&#xff0c;接收端设置一条线路为活动线&#xff0c;另一条…

免费泛域名SSL如何申请,和通配符有什么区别

-----让我们明确什么是泛域名。所谓泛域名&#xff0c;是指使用星号&#xff08;*&#xff09;作为子域名的占位符&#xff0c;它可以匹配任意子域名。-----而通配符在域名中&#xff0c;它可以出现在主域名的任何位置&#xff0c;它可以用于主域名和子域名的保护。 主要应用场…

XZ-Utils后门事件过程及启示

Part.01 背景 XZ-Utils&#xff08;曾经叫做LZMA Utils&#xff09;是一款开源的无损压缩命令行工具&#xff0c;是用C语言编写的跨平台工具&#xff0c;可以用于类Unix系统和Windows系统。在多数情况下&#xff0c;xz的压缩率要好过gzip和bzip2&#xff0c;解压速度也快过bz…

Java的数组定义和使用

目录 1.前言 2.数组的概念 3.在Java中的创建和初始化 3.1数组的创建 3.2数组的初始化 4.关于使用 4.1数组元素的访问 4.2数组的遍历 4.3length和length()的区别 5.数组其实是引用类型数据 5.1初始JVM的内存分布 5.2基本类型变量与引用类型变量的区别 5.3关于null的认识 5.4设计…

工作流JBPM画图与配置

文章目录 ☃️7.1 画图☃️7.2 配置7.2.1 配置任务办理人7.2.1.1 写死的方式配置任务办理人&#xff08;不推荐&#xff09;7.2.1.2 #{}方式配置任务办理人7.2.1.3 实现接口方式配置任务办理人7.2.1.4 方法指定方式分配任务办理人 7.2.2 配置节点属性7.2.2.1 判断节点(decision…

Sourcetree安装使用(补个笔记)

Sourcetree介绍 Sourcetree是一款免费的Git图形化客户端&#xff0c;它由Atlassian开发&#xff0c;提供了跨平台的支持&#xff0c;可运行在Windows和Mac操作系统上。Sourcetree可以让开发者更方便地使用Git来管理代码&#xff0c;不需要在命令行中输入复杂的Git命令&#xf…

HTML学习笔记:链接target属性

关于target的使用&#xff1a; <a href"https://www.baidu.com" target"_parent">网址链接</a>其中关于target四个特殊目标的理解&#xff0c;W3school上的解释为&#xff1a; HTML 标签的 target 属性 其中_black和_self两个属性很好理解&…