React中浅拷贝和浅拷贝

最新推荐文章于 2024-08-06 14:40:48 发布
最新推荐文章于 2024-08-06 14:40:48 发布
阅读量506 收藏
点赞数
文章标签： react typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40230026/article/details/109764491
版权

文章目录


最近，学习和使用了react+ts的一些基本语法，使用过程中遇到了深拷贝和浅拷贝的问题：修改数据后，控制台打印数据已经改变，但是页面却不显示。多亏了同事的帮忙，一言难尽。下面把问题简单记录下。

1:深拷贝和浅拷贝的区别

浅拷贝：两个变量都是指向一个地址，改变了一个变量，另一个变量也随之改变。这也是浅拷贝带来的副作用，两个变量会相互影响到，因为它们指向同一个地址。

深拷贝：两个变量互相独立，指向的是不同的地址。好处是其中一个变量改变了，另外一个变量不受影响。

很显然，我们要想达到数据修改就能在页面显示，使用浅拷贝没错啦。

2:浅拷贝的使用

比如数据是dataSource，那么需要写成 {…dataSource}

smartjiang-java
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react 深拷贝和浅拷贝
微笑向暖，清风徐来
04-23 4397
在react hook中使用到深拷贝（ let tempBlockData = […blockData]; ），是将state值重新赋值，再进行操作。之所以使用到深拷贝，是为了解决useState定义的state值无法直接更新和操作，所以，为了直接操作state的blockData，先进行深拷贝，然后再用对应的setState进行更新。 什么是深拷贝，什么是浅拷贝？ 假设将A复制给B，即B=A，如果B的改变，A也会改变，就是浅拷贝，如果A没有改变，就是深拷贝，（其实深拷贝只针对较为复杂的object类型数据
【前端基础】——浅拷贝和深拷贝
m0_50785976的博客
11-03 518
浅拷贝和深拷贝
【React学习】React框架下实现浅拷贝与深拷贝
最新发布
zx1041561837的博客
08-06 345
在 React 应用中，深拷贝常用于需要确保状态对象的完全独立时。例如，当处理复杂的嵌套状态或传递状态给多个子组件时，函数修改的是状态的副本，而不是原始状态，从而避免了直接修改 React 状态的问题。是一个流行的 JavaScript 实用库，提供了许多有用的函数，包括。是一个常用于深拷贝对象和数组的方法。下面是一个在 React 中使用。
React之浅拷贝与深拷贝
weixin_30886233的博客
04-01 869
最近发现的一个bug让我从react框架角度重新复习了一遍浅拷贝与深拷贝。 浅拷贝，就是两个变量都是指向一个地址，改变了一个变量，那另一个变量也随之改变。这就是浅拷贝带来的副作用，两个变量会相互影响到，因为它们指向同一个地址。 深拷贝，就是互相独立，指向的是不同的地址，一个变量改变了，另一个变量不会被影响到。 react角度： ...
React中的浅复制与深复制
热门推荐
Babyfaceqian的博客
05-16 1万+
React中的浅复制与深复制 学习前端不到一年，在编写react框架下的代码时，经常会遇到明明已经改变了props页面却没有重新渲染的问题。于是为自己整理了一下关于react中的浅复制与深复制的区别以及实现方式，希望对刚刚入门前端的童鞋们也有所帮助。
React重渲染时的浅拷贝
weixin_34320159的博客
01-14 624
React的有状态组件在state发生变化时会重渲染， 重渲染过程为：state变化-->shouldComponentUpdate/ComponentWillReceiveProps-->componentWillUpdate-->render-->componentDidUpdate。 react进入重渲染的判定依据是state对象属性值的浅比对，如果我们需要深比对st...
react深拷贝和浅拷贝的区别
IIISX的博客
09-23 274
深拷贝：两个变量互相独立，指向的是不同的地址。好处是其中一个变量改变了，另外一个变量不受影响 浅拷贝：两个变量都是指向一个地址，改变了一个变量，另一个变量也随之改变。这也是浅拷贝带来的副作用，两个变量会相互影响到，因为它们指向同一个地址。 ...
学习记录——深拷贝浅拷贝
sakura_zr的博客
09-22 175
浅拷贝：只拷贝一层 第二层没有拷贝 Object.assign() Object.create() es6中的解构赋值 深拷贝 : 整个的数据都是新的 不论基层 都是新的数据 JSON.parse(JSON.strinfiy(数据)) const defaultState = [ { key: '1', name: '路飞', age: 20, }, { key: '2', name: '鸣人'
【浅谈深浅克隆/深浅拷贝及应用场景】react点击提交 修改后的数据未提交有延迟
mwh321的博客
11-04 458
深浅克隆 一、react项目中遇到的问题： **1.描述：**如下图 点击提交，数据有更新但【集装箱号未更新，提交之后还显示在页面】，刷新页面才提交成功 2.问题：修改集装箱号这里的数据没有深克隆 **3.解决：**在修改的时候用深克隆SON.stringify() condom[0].innerHTML="<input value="+ JSON.stringify(condom[0].innerText) +" />" 二、我们来谈一下深浅克隆： 1.概念：什么是深克隆，什么是浅克
deep-copy-ts:typescriptjavascript的递归深拷贝、克隆和浅拷贝函数
06-27
深拷贝-ts 用于 typescript/javascript 的递归深拷贝、克隆和浅拷贝函数 基于 MIT 和 LGPL 许可证可用。
前端深拷贝 和浅拷贝有哪些方式,你在哪里使用过
05-20
前端深拷贝和浅拷贝的方式有很多...我在工作中经常使用深拷贝和浅拷贝，例如在React开发中需要对state和props进行拷贝，以避免直接修改原始数据。同时也可以在处理数据时对数据进行深拷贝，以避免对原始数据造成影响。
React Hooks浅学使用
jaysj的博客
09-17 199
React Hooks 最近在写个老项目的时候，引入了hooks开发， 使用感觉非常愉快，同时也踩了一些坑。作为一名小白，单单写的时候我认为hooks带来的优点还是很多的，比如不需要写一堆生命周期了，不用每次this了。而且完全向下兼容很适合老项目中混用????，本篇仅限于理解使用，不适于理解原理。 1.首先是写法的改变 我们可以渐渐放弃Class // 原有的写法 class Demo extends React.Component {} // hooks 写法 简洁! function Demo() {
react中修改参数值没有重新渲染问题-关于浅拷贝与深拷贝
diaogechuo1880的博客
09-05 1054
项目中遇到个问题，有一个数组参数，删除数组中一个元素，并且重新改变state但是页面没有重新渲染，先面用一个简单的todolist重现下问题 如下渲染出来menu，当我点击删除时触发onClose事件，在onClose中直接对listData进行操作，打印出的数据是删除后的，但是页面没有重新渲染 const data=[ {name:'小A',age:'10...
深拷贝、浅拷贝 react的“不可变值”
faith_girl的博客
12-11 1792
在react中 如果不想改变初始值的话 建议使用hook方法进行深拷贝使用展开运算符（Spread Operator）对象的例子：setState({...state,});在这个例子中，我们使用展开运算符 … 来创建一个新的对象，新对象包含了原对象的所有属性和方法，同时修改了 count 属性的值。由于我们使用了新的对象来更新状态变量，因此可以实现不可变数据。数组的例子：使用数组的 map() 方法可以使用数组的 map() 方法来创建一个新的数组，从而实现不可变数据。
react项目里用redux修改状态遇到的深浅拷贝问题
Voiceu的博客
05-28 742
在react项目里遇到一个情景： 修改redux里的一个数据，但是这个数据是对象下的对象下的对象， 一开始我是这样做的 export default (state = mario(), action) => { let newState // 能不能在这里进行newState = { ...state }，每一次处理action // 都会走一遍这个函数，下面试验一下 //这个是浅拷贝，只能复制对象里的非对象普通数据 // 但是里面的tracks是对象，还是指向
js深拷贝和浅拷贝
99的博客
06-30 725
在 JS 中有一些基本类型像是Number、String、Boolean，而对象就是像这样的东西{ name: 'Larry', skill: 'Node.js' }，对象跟基本类型最大的不同就在于他们的传值方式。 基本类型是按值传递，像是这样：在修改a时并不会改到b var a = 25; var b = a; b = 18; console.log(a);//25 console.lo
React中关于State的一切
weixin_42447364的博客
07-03 316
react state
简单聊聊大家所常说的浅拷贝、深拷贝
weixin_43933771的博客
09-08 256
数据存储问题 基本数据类型因为占用内存较小从而存储在栈内存中，方便查找，同时当基本类型的变量互相赋值时，不会出现值共享问题（即污染变量）。 而引用数据类型因为存储在堆内存中，通过一个引用（即内存地址）指向其在堆内存中的空间，因此互相赋值的时候便会出现引用值共享问题。那么如何解决这个问题呢？ 浅拷贝 let arr = [1, 2, 3]; let newArr = arr; newArr[0] = 100; console.log(arr);//[100, 2, 3] 这是直接赋值的情况，不涉及任何拷贝
【javascript】详解javaScript的深拷贝
weixin_33862993的博客
08-14 475
      前言： 最开始意识到深拷贝的重要性是在我使用redux的时候（react + redux）， redux的机制要求在reducer中必须返回一个新的对象，而不能对原来的对象做改动，事实上，当时我当然不会主动犯这个错误，但很多时候，一不小心可能就会修改了原来的对象，例如：var newObj = obj; newObj.xxx = xxx  实际上，这个时候newObj和obj两个...
深拷贝浅拷贝的demo
06-10
深拷贝和浅拷贝都是复制一个对象，区别在于复制后的对象与原对象是否共享同一内存地址。深拷贝会复制出一个新的对象，与原对象不共享内存地址，而浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。 以下是深拷贝和浅拷贝的示例代码： ```javascript // 浅拷贝示例 let obj1 = { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue', 'React'] } let obj2 = Object.assign({}, obj1) // 使用 Object.assign() 方法进行浅拷贝 obj2.age = 21 // 修改 obj2 的 age 属性 obj2.skills.push('Angular') // 修改 obj2 的 skills 属性 console.log(obj1) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } console.log(obj2) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } // 可以看到，修改了 obj2 的属性后，obj1 的 skills 属性也被修改了，这是因为浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。 // 深拷贝示例 let obj3 = { name: 'Alice', age: 20, skills: ['JavaScript', 'Vue', 'React'] } let obj4 = JSON.parse(JSON.stringify(obj3)) // 使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝 obj4.age = 21 // 修改 obj4 的 age 属性 obj4.skills.push('Angular') // 修改 obj4 的 skills 属性 console.log(obj3) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React' ] } console.log(obj4) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] } // 可以看到，修改了 obj4 的属性后，obj3 的属性没有被修改，这是因为深拷贝会复制出一个新的对象，与原对象不共享内存地址。 ``` 需要注意的是，深拷贝虽然可以解决浅拷贝的问题，但是由于深拷贝会递归地复制对象的所有属性，所以可能会导致性能问题，特别是在处理大型复杂对象时。因此，需要根据具体情况选择合适的拷贝方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值