react 深拷贝方法

React 没有提供深拷贝方法，但是可以使用第三方库 lodash 来实现深拷贝，具体代码如下：
import _ from 'lodash';

const deepClone = (obj) => {
return _.cloneDeep(obj);
}
登录后复制
使用方法：
const obj = { a: { b: 1 } };
const newObj = deepClone(obj);
console.log(newObj); // { a: { b: 1 } }
console.log(obj === newObj); // false
登录后复制
注意：使用 lodash 的深拷贝方法可能会影响性能。如果对象的层级比较浅，可以使用 Object.assign() 或展开运算符来实现浅拷贝。但如果对象包含嵌套对象或数组，就需要使用深拷贝。

相关问题

react useState 深拷贝

useState 是 React 中的一个 Hook，用于在函数组件内部添加状态管理。当你直接从 useState 初始化的状态变量进行赋值时，React 并不会做深度复制，这意味着如果你修改了这个状态变量的某个嵌套属性，原始的状态也会随之改变。
例如：
const [state, setState] = useState({ nestedObject: { prop1: 'value1' } });
// 直接修改嵌套对象
setState({ nestedObject: { prop1: 'newValue' } });
登录后复制
在这种情况下，nestedObject 的 prop1 已经变为 'newValue'，而不是 'value1'。
如果你需要对状态进行深拷贝，可以使用 JavaScript 的内置库，如 JSON.parse() 和 JSON.stringify() 进行序列化然后再反序列化，或者使用第三方库如 lodash 的 _.cloneDeep()：
import { useState, cloneDeep } from 'react';
const clonedState = cloneDeep(state);
setState(clonedState);
登录后复制
但是这种方法在处理复杂数据结构时可能会有一些性能开销，因此通常建议在必要时才进行深拷贝，并确保理解其影响。

深拷贝浅拷贝的demo

深拷贝和浅拷贝都是复制一个对象，区别在于复制后的对象与原对象是否共享同一内存地址。深拷贝会复制出一个新的对象，与原对象不共享内存地址，而浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。
以下是深拷贝和浅拷贝的示例代码：
// 浅拷贝示例
let obj1 = {
name: 'Alice',
age: 20,
skills: ['JavaScript', 'Vue', 'React']
}

let obj2 = Object.assign({}, obj1) // 使用 Object.assign() 方法进行浅拷贝

obj2.age = 21 // 修改 obj2 的 age 属性
obj2.skills.push('Angular') // 修改 obj2 的 skills 属性

console.log(obj1) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
console.log(obj2) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到，修改了 obj2 的属性后，obj1 的 skills 属性也被修改了，这是因为浅拷贝只是复制了一个指向原对象的引用，两个对象共享同一内存地址。

// 深拷贝示例
let obj3 = {
name: 'Alice',
age: 20,
skills: ['JavaScript', 'Vue', 'React']
}

let obj4 = JSON.parse(JSON.stringify(obj3)) // 使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝

obj4.age = 21 // 修改 obj4 的 age 属性
obj4.skills.push('Angular') // 修改 obj4 的 skills 属性

console.log(obj3) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React' ] }
console.log(obj4) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到，修改了 obj4 的属性后，obj3 的属性没有被修改，这是因为深拷贝会复制出一个新的对象，与原对象不共享内存地址。
登录后复制
需要注意的是，深拷贝虽然可以解决浅拷贝的问题，但是由于深拷贝会递归地复制对象的所有属性，所以可能会导致性能问题，特别是在处理大型复杂对象时。因此，需要根据具体情况选择合适的拷贝方法。