react state的设计问题？

Question

要向后台提交一个对象，设计state的时候，是分别为对象里面每个字段设计一个state？还是只有一个对象的state？
第二种情况是否可行？如果可行两种情况哪种比较好一点？（组件内的state）
补充：第一种情况：

this.state={
  key1:'',
  key2:''
}

第二种情况：

this.state={
  object:{key1:'',key2:''}
}

Answer 1

其实这种情况下，还是看你的提交数据吧，分析下第一种和第二种的利弊：

1. 第一种：

   • 优点是state都放在一个层级，在更新state的时候this.setState()会类似extend的方式更新数据，不用每个都更新数据，也就是state里面什么变了更新什么，
   • 缺点也是解构扁平，是不友好的风格

2. 第二种

   • 结构好，符合大部分风格要求
   • 更新state的时候需要注意，因为state里面的object对象里面的数据都需要更新，不然就会被覆盖了，甚至丢失了，

所以要看你的业务的修改，state的变化情况和修改情况，如果变化频繁，而且数据较多的话，其实可以考虑第一种，因为数据多，但是变化的可能就是几个，setstate会做扩充追加，不然第二种就需要任何变化都需要更新整个state里面的object，即使有的object属性数据没有变化。

Answer 2

首先 redux 的 store 一定要全局只有一个。

然后 state 的每一个第一级字段对应一个功能模块。如下设计：

{
    app: {}, // 一些系统基本状态
    account: {}, // 账户模块状态
    ....
}

Answer 3

把状态放进对象，为了保证对象 immutable，每次更新都要返还一个新的引用，忘记没写还可能造成组件不会更新，比较麻烦。所以，能用第一种还是用第一种。

this.setState({object: { ...object, key1: newKey1}})
// or 
this.setState({object: Object.assign({}, this.state.object, {key1: newKey1})})

Answer 4

用第一种吧，不好看，但是比较好用，不容易出错。提交的时候重新组织下数据就行了，略微的麻烦一点，无所谓的。