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

知识获取源–晨哥(现实中的人 嘿嘿)
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–实现不可变

const startlist=[{id:1,name:'tom'},{id:2,name:'jerry'}]
const [list2,setList2]=useState(startlist);// 列表
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');}

在这里插入图片描述

使用深拷贝 -实现不可变。

为list1 创建新的内存地址 即使改变原数组中对象的引用 也不会改变selectList1的值

使用 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);
}

在使用map进行赋予值时要注意不要直接对list的key进行操作 否则会改变list的值
在这里插入图片描述

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

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

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

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

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

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

博主个人感觉易懂的深拷贝和浅拷贝文章~推荐一波
[文章链接1] [文章链接2]

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

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

相关文章

UML概扩知识点

UML是一个重要的知识点,考察的频度也很高。我们需要了解的是UML的一系列的图,红框里的是最核心的。 其次是对各种关系有了解(红框里的: 依赖关系,关联关系,泛化关系,实现关系) UM…

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测

多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测 目录 多维时序 | MATLAB实现TSOA-TCN-Multihead-Attention多头注意力机制多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现TSOA-TCN-Multihead-…

5G CPE可代替宽带,解决断网问题

最近某运营商就玩起了套餐,断用户的网。 老百姓对宽带半知不解,网络断了没法上网,很着急。因为相信运营商,维修人员怎么说,老百姓就怎么办呗,直到最后才发现自己上当,但钱都给了。 截至2023年9月…

批量复制文件,自动跳过重名,高效文件管理从此开始“

你是否曾经遇到过需要批量复制文件,但又担心重名文件覆盖的问题?现在,我们有一个好消息要告诉你——你可以使用我们的文件管理工具,一键批量复制文件到指定文件夹,并自动跳过重名文件,高效管理你的文件从此…

全栈开发中的安全注意事项:最佳实践和工具

安全性是当今数字环境中最重要的问题,而在全栈开发中这一点尤为重要。当企业努力创建强大且动态的应用程序时,他们必须应对复杂的安全威胁领域。在本文中,我们将探讨开发人员可以用来确保安全的全栈开发环境的最佳实践和工具。 1.1 全栈开发的…

在windows系统搭建LVGL模拟器(codeblock工程)

1.codeblock准备 下载codeblock(mingw),安装。可参考网上教程。 2.pc_simulator_win_codeblocks 工程获取 仓库地址:lvgl/lv_port_win_codeblocks: Windows PC simulator project for LVGL embedded GUI Library (github.com) 拉取代码到本地硬盘&…

Makefile基础使用与原理

一、基本概念 通常我们编写好代码后,都需要编译,只是这些操作是由IDE来完成,我们只需要点击一个编译按钮。当项目工程越来越庞大,存在几十个甚至更多的文件的时候,你使用的不是IDE工具,而是命令行&#xf…

图像色彩还原算法

图像色彩还原算法的目标是改善或修复图像中失真、退色或其他色彩问题。以下是一些常见的图像色彩还原算法: 白平衡算法: 白平衡算法旨在校正图像中的色温,使其看起来更自然。其中一种简单的方法是灰度世界假设,即假设整个图像的平…

Repo代码仓库搭建

使用rockchip sdk二次开发,代码十几个G,都放在一个git仓库的话,每次git status要等好久,决定拆分一下,官方是用repo做代码管理的,我打算也搭建个类似开发环境。 1.首先在git服务器上创建一个manifest仓库&…

建立海外SD-WAN专线网络的成本分析

高速、稳定的网络连接是企业成功拓宽海外市场和开展海外业务的关键因素之一。作为一种提供更高质量和性能的连接的网络解决方案,海外SD-WAN专线被越来越多的企业选择。以下将详细介绍建立海外SD-WAN专线网络的成本组成,以协助企业更全面地了解和规划对网…

玩转数据之美:FineReport报表操作小技巧

本人详解 作者:王文峰,参加过 CSDN 2020年度博客之星,《Java王大师王天师》 公众号:JAVA开发王大师,专注于天道酬勤的 Java 开发问题中国国学、传统文化和代码爱好者的程序人生,期待你的关注和支持!本人外号:神秘小峯 山峯 转载说明:务必注明来源(注明:作者:王文峰…

log4j2 xml 配置文件 屏蔽 第三方 依赖包 的日志

<!-- 第三方日志系统 逐个屏蔽 --> <logger name"org.springframework.core" level"info"/> <logger name"org.springframework.beans" level"info"/> <logger name"org.springframework.context"…

java项目dependences下面报错,红色波浪线

1&#xff0c;问题&#xff1a;java项目dependences下面波浪线 方法一&#xff1a;重新加载maven依赖&#xff08;未解决&#xff09; 报错: [INFO] ------------------------------------------------------------------------ [INFO] BUILD FAILURE [INFO] ----------------…

01.前言

前言 1.什么是前端开发 前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程核心技术&#xff1a;HTML&#xff0c;CSS&#xff0c;JavaScript 以及衍生出的各种技术&#xff0c;框架等 2.前端开发应用场景 3.前端职业路线 4.什么是CS架构与BS架构 介绍 应用软件&a…

飞天使-实际运用安装rabbitmq

文章目录 安装rabbitmqphp脚本连接测试php 安装驱动 安装rabbitmq php 安装 sudo yum -y install yum-utils sudo yum -y install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm sudo yum -y install https://rpms.remirepo.net/enterprise/remi-r…

ubuntu下搜索文件的几种方法

一、whereis命令&#xff1a; whereis命令只能用于程序名的搜索&#xff0c;而且只搜索二进制文件(参数-b)、man说明文件(参数-m)和源代码文件(参数-s)。如果省略参数&#xff0c;则返回所有信息。 whereis的命令格式&#xff1a; whereis [-bmsu] [BMS 目录名 -f ] 文…

leetCode算法—4.寻找两个正序数组的中位数

1.给定两个大小分别为 m 和 n 的正序&#xff08;从小到大&#xff09;数组 nums1 和 nums2。请你找出并返回这两个正序数组的 中位数 。 算法的时间复杂度应该为 O(log (mn)) 。 示例 1&#xff1a; 输入&#xff1a;nums1 [1,3], nums2 [2] 输出&#xff1a;2.00000 解释…

博士毕业需要发表几篇cssci论文

大家好&#xff0c;今天来聊聊博士毕业需要发表几篇cssci论文&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff1a; 博士毕业需要发表几篇CSSCI论文 背景介绍 CSSCI即“中文社会科学引文索引”&#xff0c;被…

纯生信轻松拿下5+分文。铜死亡+免疫浸润+预后模型,快学起来吧

今天给同学们分享一篇生信文章“A novel defined risk signature of cuproptosis-related long non-coding RNA for predicting prognosis, immune infiltration, and immunotherapy response in lung adenocarcinoma”&#xff0c;这篇文章发表在Front Pharmacol期刊上&#x…

克服自卑心理,建立自信心的方法

自卑在初期往往是被我们忽视的......可是这种情绪持续发展下去&#xff0c;得不到及时的调整&#xff0c;便会出现极大的危害&#xff0c;会导致多种心理疾病。避免自卑、避免心理健康问题&#xff0c;需要我们及时发觉&#xff0c;及时改善.... 1、运用性格分析的方法初步了解…