【React学习】React框架下实现浅拷贝与深拷贝

1. 浅拷贝与深拷贝

• 浅拷贝
  只复制对象的第一层属性，对于嵌套对象或数组，复制的是引用而不是值。例如，使用 Object.assign 或 spread 操作符（...）创建的拷贝是浅拷贝。

const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

shallowCopy.b.c = 3;
console.log(original.b.c); // 输出: 3

• 深拷贝
  递归复制对象的所有嵌套属性，确保新对象完全独立于原对象。

const original = { a: 1, b: { c: 2 } };
const deepCopy = cloneDeep(original);

deepCopy.b.c = 3;
console.log(original.b.c); // 输出: 2

2. React框架下实现深拷贝

cloneDeep 是一个常用于深拷贝对象和数组的方法。lodash 是一个流行的 JavaScript 实用库，提供了许多有用的函数，包括 cloneDeep。

2.1 安装 lodash

npm install lodash

2.2 导入 cloneDeep 方法

import cloneDeep from 'lodash/cloneDeep';

2.3 使用 cloneDeep 方法

使用 cloneDeep 方法来创建对象或者数组的深拷贝：

const original = { a: 1, b: { c: 2 } };
const copy = cloneDeep(original);

// 修改副本不会影响原始对象
copy.b.c = 3;
console.log(original.b.c); // 输出: 2

2.4 在 React 中使用 cloneDeep

在 React 应用中，深拷贝常用于需要确保状态对象的完全独立时。例如，当处理复杂的嵌套状态或传递状态给多个子组件时，深拷贝可以防止无意间修改共享状态。

下面是一个在 React 中使用 cloneDeep 的简单示例：

import React, { useState } from 'react';
import cloneDeep from 'lodash/cloneDeep';

function App() {
  const [state, setState] = useState({
    user: {
      name: 'Alice',
      preferences: {
        theme: 'dark'
      }
    }
  });

  const updateTheme = () => {
    const newState = cloneDeep(state);
    newState.user.preferences.theme = 'light';
    setState(newState);
  };

  return (
    <div>
      <p>Current Theme: {state.user.preferences.theme}</p>
      <button onClick={updateTheme}>Change Theme</button>
    </div>
  );
}

export default App;

在这个示例中，cloneDeep 确保 updateTheme 函数修改的是状态的副本，而不是原始状态，从而避免了直接修改 React 状态的问题。