Reactjs React中设置状态的最佳实践？

在reactJs中设置状态的更好方法是什么

案例1：存储单独的状态变量

this.setState({
  value1: 'value1',
  value2: 'value2',
  ....
  valueN:'valueN'
})

案例2：存储在状态对象中

this.setState({
  values: {
    ...values,
    [key]: value
  }
});

在这两种情况下是否都存在性能问题

---

谢谢。

这取决于您的使用。例如，如果数据只属于一个事物或一个概念，请将其保存在状态内部的单个变量中，如果它们属于不同的事物，则执行相反的操作。希望这会有所帮助。

在案例1中，您只分配值，而在案例2中，您使用预定义的值添加新元素

通常，您可以混合使用键和值，并在集合状态内进行操作

this.setState({
  value1: {
    ...values,
    [key]: value
  },
  value2: 'value2',
  value3:  [...otherArrayValues, newValue]
  loading: false,
  id: '',
  ....
  valueN:'valueN'
})

但在您的情况下，看起来您希望在您的状态中保存数据对象（带有关联的列表），因此它是一个包含对象的数组 最好将值与对象分开，并使用before.setState之前的对象数组进行before操作

例如：

const myNewCountryValues = [
  "USA" => { id: 1, name: "United States"},
  "FR"  => { id: 2, name: "France"},
]

然后，您可以以干净的方式管理阵列：

newCountry = { id: 3, name: "Germany"} ;


myNewCountryValues.push ( newCountry );

使用associative.key：

myNewCountryValues["GE"] = newCountry ;

更新状态：

this.setState({ countries: myNewCountryValues});

或者在一行中：

this.setState({ countries: [...myNewCountryValues, newCountry]});

---

这完全取决于“存储”中存储的值的使用情况。我会尽可能避免嵌套状态，但这取决于用例。在性能成为问题之前，不要担心性能。如果“知道”很重要，那么你应该自己测试，并通过自己的经验证据和观察做出决定。你不应该基于我们的意见。保持你想要的状态。