React中如何深度克隆对象？如何避免oldMessages引用不影响state.messages

这两个问题本质上是同一个核心——打破对象引用关系，确保克隆后的对象和原对象完全独立，修改其中一个不会影响另一个。下面分享几种在React开发中常用的实用方案：

1. 最快捷的原生方案：JSON序列化/反序列化 #

这是日常开发里最常用的快速深度克隆方式，不需要额外依赖，代码简洁到飞起：

// 对state.messages做深度克隆，赋值给oldMessages
const oldMessages = JSON.parse(JSON.stringify(state.messages));

⚠️ 注意局限性：这种方法搞不定函数、Symbol、undefined值、循环引用的对象，如果你的对象包含这些类型，克隆后会直接丢失或者报错。

2. 手动递归克隆（自定义逻辑拉满） #

如果你的对象里有特殊类型（比如函数、自定义类实例），可以自己写递归函数来精准控制克隆逻辑：

function deepClone(obj) {
  // 基本类型直接返回，不用折腾
  if (obj === null || typeof obj !== 'object') return obj;
  
  // 单独处理数组
  if (Array.isArray(obj)) {
    return obj.map(item => deepClone(item));
  }
  
  // 处理普通对象
  const clonedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clonedObj[key] = deepClone(obj[key]);
    }
  }
  return clonedObj;
}

// 使用示例
const oldMessages = deepClone(state.messages);

这种方式灵活性最高，你还能根据需求加对Date对象、正则表达式这类特殊类型的处理逻辑。

3. 借助成熟第三方库：Lodash的cloneDeep #

要是不想自己写递归造轮子，Lodash的cloneDeep方法已经帮我们搞定了几乎所有边缘情况（循环引用、特殊类型啥的都不在话下），靠谱得很：

// 先装lodash：npm install lodash
import _ from 'lodash';

const oldMessages = _.cloneDeep(state.messages);

为啥浅克隆不行？ #

很多新手会用展开运算符...或者Object.assign来克隆，但这只是浅克隆——如果对象有嵌套结构，嵌套的子对象还是会和原对象共享引用：

// 浅克隆反面示例
const shallowCloned = [...state.messages];
// 修改嵌套属性会直接影响原state
shallowCloned[0].text = '我被改了';
console.log(state.messages[0].text); // 输出"我被改了"，这完全不是我们想要的！

所以必须用深度克隆才能彻底断开引用关系，确保修改oldMessages时绝对不会碰动state.messages。

内容的提问来源于stack exchange，提问作者SpaceDogCS