React类组件中编写this.initialState = this.state的作用是什么

你给出的示例是典型的表单类组件，这种写法的核心作用是保存组件的初始状态快照，方便后续快速、统一地重置组件状态，具体有这几个好处：

• 简化重置逻辑，减少冗余代码
  这个示例是注册表单组件，用户填写完内容或者提交表单后，如果需要清空表单回到初始状态，不需要手动逐个给pseudo/email/password/formErrors赋值默认值，只需要一行代码就能完成重置：

  // 重置表单逻辑
  resetForm = () => {
    this.setState(this.initialState)
  }
  

  字段越多，这种写法减少的重复代码就越明显，也不会出现漏改某个字段的问题。
• 统一维护初始状态配置
  如果后续需要调整初始状态的默认值，比如给某个字段加默认填充值，只需要修改constructor里的this.state定义即可，所有用到重置逻辑的地方都会自动生效，不需要挨个修改多处代码，维护成本更低。

注意：你示例中的this.initialState = this.state属于浅拷贝，如果你的初始state里包含数组、嵌套对象这类引用类型的值，直接修改state里的引用类型属性会同步影响到this.initialState。如果有这类场景，建议初始化时做深拷贝，比如用this.initialState = JSON.parse(JSON.stringify(this.state))，或者自己实现深拷贝逻辑。

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