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

最新推荐文章于 2023-03-18 15:30:58 发布

快乐的小z

最新推荐文章于 2023-03-18 15:30:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点文章标签：深拷贝浅拷贝 redux数据

本文链接：https://blog.csdn.net/Alison_Z/article/details/100142890

前端知识点专栏收录该内容

7 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近遇到一个需求使用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];
        }
      }
    }
  }
  return newObj;
}

2.JSON.stringify & JSON.parse

var obj = [1,2,3];
var newobj = JSON.parse(JSON.stringify(obj));

3.使用jquery的extend

$.extend( [deep ], target, object1 [, objectN ] )

deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝

target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。

object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。 

let a=[0,1,[2,3],4],
    b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);// a:[1,1,[1,3],4]  b:[0,1,[2,3],4]

伪克隆：实际只拷贝了第一层，和slice方法，concat方法一致，对于更深的层次仍是浅拷贝。