Question

这是在reactJs中设置state的更好方法。

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

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

案例2：存储在状态对象

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

两种情况都有性能问题吗？

感谢。

Answer 1

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

Answer 2

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

通常，您可以混合键和值，并在setStates

中进行操作

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

但是在你的情况下看起来你想要保存你状态中的数据对象（带关联的列表），所以它是一个包含对象的数组最好将值与object分开，然后在.setState

之前使用对象数组进行操作

示例：

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

然后你可以用干净的方式管理数组：

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


myNewCountryValues.push ( newCountry );

with associative.key：

myNewCountryValues["GE"] = newCountry ;

更新状态：

this.setState({ countries: myNewCountryValues});

或一行：

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

React中setState的最佳实践？

2 个答案: