redux全局数据使用出现问题结合深拷贝的思考

在使用Redux处理状态管理时,遇到状态更新不正确的问题,原因是Redux中的数据操作默认采用浅拷贝,导致指针仍指向初始值。通过理解深拷贝与浅拷贝的区别,尤其是它们在数据变化时的行为,选择使用ES6扩展运算符解决了一层数据结构的拷贝问题。深拷贝方法包括递归、JSON.stringify与JSON.parse以及jQuery的extend,而伪克隆和slice、concat方法只能实现一层的拷贝,对于复杂结构仍然执行浅拷贝。
摘要由CSDN通过智能技术生成

最近遇到一个需求使用redux可以比较简洁的实现,但是比较奇怪的是出现了下面的问题:

从图中可以看出status的值实际上已经是true,然后在真正使用时渲染出来的是false。经过调试发现,原因在于对于redux中的数据进行操作时是浅拷贝的方式,实际上指针指向的仍是最初初始化的值,因此导致了取值时不正确的情况!

由于数据结构只涉及一层,最终选择了es6的扩展运算符解决了该问题。

深拷贝和浅拷贝的区别在于:

浅拷贝得到的数据在当原始数据发生变化时随之变化,因为指针指向内存中同样的位置。

深拷贝由于指针指向不同的位置,因此数据不会随之变化。

深拷贝的几种方式:

1.递归

function deepClone(obj) {
  let newObj = Array.isArray(obj) ? [] : {};
  if (obj && typeof obj === 'object') {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === 'object') {
          newObj[key] = deepClone(obj[key]);
        } else {
          newObj[key] = obj[key];
        }
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值