React组件卸载后变量赋值state仍持久化的原因咨询

嘿，这个问题的核心其实是对象引用和作用域的区别，我给你拆解一下：

示例1的问题根源：共享的对象引用 #

你看第一个例子里的form变量：

const form = { foo: bar }
class MyComponent extends React.Component {
  state = { form: form }
  // ...
}

这里的form是组件作用域之外的模块级变量——只要你的应用没完全刷新（比如单页应用的路由切换），这个变量就会一直保存在内存里，不会被销毁。当你把它赋值给组件的state时，state里存储的并不是这个对象的拷贝，而是指向这个外部对象的引用。

所以哪怕组件卸载了，这个外部的form对象依然存在。等下次你重新挂载这个组件时，它的state又会指向同一个外部对象，看起来就像是state“持久化”了——其实本质是外部的共享对象没被回收，组件复用了它的引用。

示例2为什么没问题：独立的对象实例 #

再看第二个例子：

class MyComponent extends React.Component {
  state = { form: { foo: bar } }
  // ...
}

这里的{ foo: bar }是在组件实例化时创建的全新对象，每个组件实例都会拥有属于自己的独立对象。当组件卸载时，整个组件实例会被标记为垃圾回收，它的state和内部的form对象也会跟着被清理掉，自然不会有“持久化”的问题。

怎么解决示例1的问题？ #

如果你想使用外部的配置对象，但又不想让组件共享同一个引用，可以在赋值时做一个浅拷贝，把外部对象的属性复制到新对象里：

state = { form: { ...form } }
// 或者用Object.assign
state = { form: Object.assign({}, form) }

如果你的form是嵌套对象，那就需要做深拷贝，比如用JSON.parse(JSON.stringify(form))（注意这个方法有局限性，不能处理函数、Symbol等类型），或者使用专门的深拷贝工具函数。这样组件的state就会持有独立的对象副本，不会和外部变量共享引用了。

内容的提问来源于stack exchange，提问作者rizhao w.