深拷贝、浅拷贝 react的“不可变值”

news2024/11/17 5:30:09

知识获取源–晨哥(现实中的人 嘿嘿)
react中如果你想让一个值始终不变 或者说其他操作不影响该值 它只是作用初始化的时候

使用了浅拷贝–改变了初始值

会改变初始值(selectList1)
都指向同一个地址

  const selectList1 = { title: '大大', value: '1' };
    const [list1, setList1] = useState(selectList1);// 列表
    list1.title = 'xiaoxiao';
    list1.value = '2';
    console.log('list1', list1, 'selectList1', selectList1);

在这里插入图片描述

使用浅拷贝结合react–实现不可变

function handleUpdate (id, newName) {
        const newlist = list2.map((item) => {
				    if (item.id === id) {
				      return {
				        ...item,
				        name: newName
				      };
				    }
				    return item;
				  });
	 setList2(newlist);
    }
    console.log('startlist', startlist, 'list2', list2);
     const onFirstClick = () => {
        handleUpdate(2, 'xiaoming');
       }

在这里插入图片描述

使用深拷贝 -实现不可变

使用 JSON.parse(JSON.stringify(obj)) 的方式来复制对象

const selectList1 = { title: '大大', value: '1' };
const [list1, setList1] = useState(JSON.parse(JSON.stringify(selectList1)));
list1.title = 'xiaoxiao';
list1.value = '2';
console.log('list1', list1, 'selectList1', selectList1);

在这里插入图片描述

使用hook- 实现不可变

const selectList1 = { title: '大大', value: '1' };
const [list1, setList1] = useState(selectList1);// 列表
 useEffect(() => {
 	const newList={ title: 'xiaoxiao', value: '2' }
      setList1(newList);
    }, []);
console.log('list1', list1, 'selectList1', selectList1);
//setList1会新建一个栈给list1赋予值 改变list1的值时 不改变selectList1的值

在这里插入图片描述
在 React 中,useState Hook 返回的数组中,第一个元素是状态变量,第二个元素是更新状态的函数。在这个例子中,我们使用了 useState Hook 来定义了一个名为 list1 的状态变量,并将 selectList1 赋值给 list1。

useState Hook 会在内部维护一个状态对象,每次更新状态时,都会创建一个新的状态对象,并用新的对象替换原来的对象。因此,使用 setList1 函数更新 list1 状态时,实际上是将原来的状态对象替换为一个新的状态对象。

当我们修改 list1 状态变量中的属性时,实际上是修改了状态对象的属性。由于 setList1 函数会创建一个新的状态对象,因此修改状态对象的属性并不会影响到 setList1 函数本身,也就是说,setList1 函数并没有进行深拷贝,而仅仅是替换了状态对象的引用,从而实现了对状态变量的更新。

React 的状态更新是异步的,也就是说,状态更新函数并不会立即更新状态变量的值,而是将更新请求加入到一个更新队列中,等到下一次渲染时才会执行状态更新操作。因此,在状态更新函数中使用状态变量的值时,可能会出现不一致的情况,需要特别注意。

需要注意的是,虽然在这个例子中我们可以通过修改状态变量的属性来实现状态更新,但是在 React 中并不推荐这种方式。如果状态变量是一个对象或数组等引用类型,应该使用不可变数据的方式来进行状态更新,以避免出现意外的修改和副作用。

下面介绍几种常用的不可变数据的方式:

在react中 如果不想改变初始值的话 建议使用hook方法进行深拷贝

使用展开运算符(Spread Operator)

  • 对象的例子:
const [state, setState] = useState({ count: 0, name: 'Tom' });

function handleClick() {
  setState({
    ...state,
    count: state.count + 1,
  });
}

在这个例子中,我们使用展开运算符 … 来创建一个新的对象,新对象包含了原对象的所有属性和方法,同时修改了 count 属性的值。由于我们使用了新的对象来更新状态变量,因此可以实现不可变数据。

  • 数组的例子:
const [list, setList] = useState(['a', 'b', 'c']);

function handleAdd() {
  setList([...list, 'd']);
}

function handleDelete(index) {
  setList([...list.slice(0, index), ...list.slice(index + 1)]);
}
  • 使用数组的 map() 方法

可以使用数组的 map() 方法来创建一个新的数组,从而实现不可变数据。

const [list, setList] = useState([{ id: 1, name: 'Tom' }, { id: 2, name: 'Jerry' }]);
 
function handleUpdate(id, newName) {
cosnt newlist=list.map(item => {
    if (item.id === id) {
      return {
        ...item,
        name: newName,
      };
    }
    return item;
  })
  setList(newlist);
}
 

不可变数据的方式来管理状态的优缺点

可以带来以下优点:
提高性能:由于不可变数据可以避免一些难以发现的错误,并且可以减少不必要的重渲染,从而提高程序的性能。

简化代码:不可变数据可以避免副作用和意外修改,从而简化了代码的编写和维护。
方便调试:不可变数据可以避免一些难以发现的错误,从而方便调试和测试。

不可变数据的方式也存在一些缺点:
需要额外的代码:不可变数据需要创建新的对象或数组,因此需要额外的代码来实现。

需要更多的内存:由于不可变数据需要创建新的对象或数组,因此需要更多的内存来存储。
使用不可变数据的方式来管理状态,其原理是每次对数据进行修改时,都会创建一个新的数据对象,而不是在原始数据上进行修改。这样可以避免在修改数据时意外修改了其他地方引用的相同数据,从而增加了程序的稳定性和可读性。

使用不可变数据的方式,可以通过浅拷贝和深拷贝两种方式来实现。浅拷贝指的是只复制对象或数组的一层属性,而深拷贝则是复制对象或数组的所有属性和方法。在 React 中,可以使用浅拷贝和深拷贝的方式来管理状态,具体的方法包括展开运算符、数组的 map() 方法和库函数等。

易懂的深拷贝和浅拷贝[文章链接]1(https://blog.csdn.net/m0_50785976/article/details/127666504?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170229913616800186535741%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=170229913616800186535741&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-127666504-null-null.142%5Ev96%5Epc_search_result_base4&utm_term=%E5%89%8D%E7%AB%AF%20%E6%B7%B1%E6%8B%B7%E8%B4%9D%E5%92%8C%E6%B5%85%E6%8B%B7%E8%B4%9D&spm=1018.2226.3001.4187) 文章链接2

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

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

相关文章

ES-分析器

分析器 两种常用的英语分析器 1 测试工具 #可以通过这个来测试分析器 实际生产环境中我们肯定是配置在索引中来工作 GET _analyze {"text": "My Moms Son is an excellent teacher","analyzer": "english" }2 实际效果 比如我们有下…

前端框架(Front-end Framework)和库(Library)的区别

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

基于OpenCV+CNN+IOT+微信小程序智能果实采摘指导系统——深度学习算法应用(含python、JS工程源码)+数据集+模型(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境TensorFlow 环境Jupyter Notebook环境Pycharm 环境微信开发者工具OneNET云平台 模块实现1. 数据预处理1)爬取功能2)下载功能 2. 创建模型并编译1)定义模型结构2)优化…

appium安卓app自动化,遇到搜索框无搜索按钮元素时无法搜索的解决方案

如XX头条,搜索框后面有“搜索”按钮,这样实现搜索操作较为方便。 但有些app没有设置该搜索按钮,初学者就要花点时间去学习怎么实现该功能了,如下图。 这时候如果定位搜索框,再点击操作,再输入文本后&#x…

java工程(ajax/axios/postman)向请求头中添加消息

1、问题概述 在项目中我们经常会遇到需要向请求头中添加消息的场景,然后后端通过request.getRequest()或者RequestHeader获取请求头中的消息。 下面提供几种前端向请求头添加消息的方式 2、创建一个springmvc工程用于测试 2.1、创建工程并引入相关包信息 sprin…

Maven项目引入本地jar

Maven项目引入本地jar 1.对应maven模块项目中建lib目录,将jar放入进去 2.在对应的模块pom.xml中引入此依赖jar 3.在对应的maven-plugin插件打包的pom.xml中指定需要includeSystemScope为true的jar

做数据分析为何要学统计学(10)——如何进行时间序列分析

时间序列是由随时间变化的值构成,如产品销量、气温数据等等。通过对时间序列展开分析,能够回答如下问题: (1)被研究对象的活动特征是否有周期性(也称季节性)(2)被研究对…

strict-origin-when-cross-origin

严格限制同源策略 (1)允许服务器的同源IP地址访问 (2)允许Referer --- 后端服务器要配置

2023年阿里云云栖大会-核心PPT资料下载

一、峰会简介 历经14届的云栖大会,是云计算产业的建设者、推动者、见证者。2023云栖大会以“科技、国际、年轻”为基调,以“计算,为了无法计算的价值”为主题,发挥科技平台汇聚作用,与云计算全产业链上下游的先锋代表…

树莓派,opencv,Picamera2利用舵机云台追踪人脸

一、需要准备的硬件 Raspiberry 4b两个SG90 180度舵机(注意舵机的角度,最好是180度且带限位的,切勿选360度舵机)二自由度舵机云台(如下图)Raspiberry CSI 摄像头 组装后的效果: 二、项目目标…

排序-选择排序与堆排序

文章目录 一、选择排序二、堆排序三、时间复杂度四、稳定性 一、选择排序 思想: 将数组第一个元素作为min,然后进行遍历与其他元素对比,找到比min小的数就进行交换,直到最后一个元素就停止,然后再将第二个元素min&…

温湿度传感器DHT11的简单应用

文章目录 一、DHT11是什么?二、使用步骤1.硬件1.硬件连接2.工作原理1.串行单总线2.温湿度数据采集原理 2.软件1.DHT11初始化如下(示例):2.DHT11复位如下(示例):3.等待DHT11的回应如下&#xff0…

微信小程序过滤器之计算当前时间差

微信小程序过滤器之计算当前时间差 前言一、wxs简介二、使用步骤1.定义2.使用 前言 最近遇到了一个需求,将小程序里面的具体时间2023-12-11 09:41:06转为当前时间差10小时前,这块可以使用js逻辑函数对数据进行处理,但这里我们采用微信小程序…

Linux系统vim,gcc,g++工具使用及环境配置,动静态库的概念及使用

Linux系统vim,gcc,g工具使用及环境配置,动静态库的概念及使用 1. Linux编辑器-vim的使用1.1 vim的基本概念1.2vim的基本操作1.3vim正常模式命令集1.4vim末端模式命令集1.5简单的vim配置 2.Linux编译器-gcc/g的使用2.1 准备阶段2.2gcc的使用2.…

DevEco Studio将编辑器整体文本改为简体中文

我们打开编辑器 随便进入一个项目 这里 我们左上角目录 选择 File下面菜单中的 Settings… 打开配置界面 然后在设置窗口左侧导航栏中 选择 Plugins 插件 然后上方导航栏中 选择 Installed 参考下图 然后 找到这个Chinese(Simplified) Chinese是什么应该不用我多说吧 我们把…

多合一iPhone 解锁工具:iMyFone LockWiper iOS

多合一iPhone 解锁工具 无需密码解锁 iPhone/iPad/iPod touch 上所有类型的屏幕锁定 在几分钟内解锁 iPhone Apple ID、Touch ID 和 Face ID 立即绕过 MDM 并删除 iPhone/iPad/iPod touch 上的 MDM 配置文件 支持所有 iOS 版本和设备,包括最新的 iOS 17 和 iPhone 1…

从零构建属于自己的GPT系列5:模型部署1(文本生成函数解读、模型本地化部署、文本生成文本网页展示、代码逐行解读)

🚩🚩🚩Hugging Face 实战系列 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在PyCharm中进行 本篇文章配套的代码资源已经上传 从零构建属于自己的GPT系列1:数据预处理 从零构建属于自己的GPT系列2:模型训…

Nginx的location和rewrite的使用

目录 常用的Nginx 正则表达式 location location 大致可以分为三类: 精准匹配:location / {...} 一般匹配:location / {...} 正则匹配:location ~ / {...} location 常用的匹配规则 location 优先级 location 示例说明…

day45-46-Vue+ElementUI实现学生管理

VueElementUI实现学生管理 代码: qiushiju/java2313_vue_elementui_crud (gitee.com) 一、思考 考虑需求(登录,查询全部,基本增删改查,分页,搜索,批量) 设计数据库搭建项目 后端…

【开源】基于Vue+SpringBoot的教学资源共享平台

文末获取源码,项目编号: S 068 。 \color{red}{文末获取源码,项目编号:S068。} 文末获取源码,项目编号:S068。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 课程档案模块2.3 课…