在 React 中创建对象的深度克隆

作者

目录

Create a Deep clone of an Object in React

  1. 在 React 中创建对象的深度克隆
  2. 在 React 中使用 Lodash 创建对象的深层副本

在 React 中创建对象的深度克隆

在 React 中创建对象的深拷贝：

  1. 使用JSON.stringify()方法将对象字符串化。
  2. 使用该JSON.parse()方法将字符串解析回对象。
  3. 将对象转换为 JSON 会使所有嵌套数组或对象失去其引用。
应用程序.js
export default function App() {
  const obj = {
    person: {
      name: {
        first: 'James',
        last: 'Doe',
      },
      address: {
        country: 'Chile',
        city: 'Santiago',
      },
    },
  };

  const deepClone = JSON.parse(JSON.stringify(obj));

  console.log(deepClone);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

我们使用
JSON.stringify
方法将对象转换为 JSON 字符串。

应用程序.js
console.log(typeof JSON.stringify({})); // 👉️ "string"

结果，所有对嵌套对象或数组的引用都丢失了。

下一步是使用
JSON.parse
方法将 JSON 字符串解析回对象。

应用程序.js
// 👇️ "object"
console.log(typeof JSON.parse(JSON.stringify({})));
将对象转换为 JSON 字符串会使所有嵌套数组或对象失去其引用。

如果现在改变复制的对象，则不会更改原始对象的内容。

应用程序.js
export default function App() {
  const obj = {
    person: {
      name: {
        first: 'James',
        last: 'Doe',
      },
      address: {
        country: 'Chile',
        city: 'Santiago',
      },
    },
  };

  const deepClone = JSON.parse(JSON.stringify(obj));

  deepClone.person.name.first = 'Bob';

  console.log(obj.person.name.first); // 👉️ "James"

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

更改deepClone对象中属性的值不会更改原始对象中的值，因为嵌套对象和数组指向内存中的不同位置。

在 React 中使用 Lodash 创建对象的深层副本

要在 React 中创建对象的深层副本，请安装并使用该
lodash.clonedeep包。该cloneDeep方法递归地克隆一个值并返回结果。

在项目的根目录中打开终端并
使用以下 2 个命令安装lodash.clonedeep包：

壳
npm i lodash.clonedeep

# 👇️ only if you use TypeScript
npm i --save-dev @types/lodash.clonedeep

现在我们可以导入和使用该cloneDeep方法了。

应用程序.js
import cloneDeep from 'lodash.clonedeep';

export default function App() {
  const obj = {
    person: {
      name: {
        first: 'James',
        last: 'Doe',
      },
      address: {
        country: 'Chile',
        city: 'Santiago',
      },
    },
  };

  const deepClone = cloneDeep(obj);

  deepClone.person.name.first = 'Bob';
  console.log(obj.person.name.first); // 👉️ "James"

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
}

该cloneDeep方法以一个值作为参数，递归地克隆它并返回结果。

–