【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 状态的问题。