Reactjs 反应-有一个或多个主设置状态功能？

我在React中发展了一段时间。当我第一次启动时，我的代码如下所示：

this.state = {
  foo: 1,
  bar: 2,
  baz: 3
};

updateFoo(num) {
  this.setState({ foo: num )};
}

updateBar(num) {
  this.setState({ bar: num )};
}

updateBaz(num) {
  this.setState({ baz: num )};
}

updateState(key, val) {
  this.setState([key]: val);
}

一个单独的函数，用于更新状态的单独部分

后来我才意识到，嗯，这是一个很好的推论，让我们改变一下。因此，我没有为每个状态更新使用单独的函数，而是使用了如下内容：

this.state = {
  foo: 1,
  bar: 2,
  baz: 3
};

updateFoo(num) {
  this.setState({ foo: num )};
}

updateBar(num) {
  this.setState({ bar: num )};
}

updateBaz(num) {
  this.setState({ baz: num )};
}

updateState(key, val) {
  this.setState([key]: val);
}

我已经使用updateState进行了一段时间的非常简单的状态更新。我喜欢它，但我意识到我可以更进一步，传递整个更新对象来更新多个状态：

updateManyStates(state) {
  this.setState(state);
}

updateManyStates({ foo: 5, bar: 6, baz: 7 });

---

在编写了updateNameStates函数之后，我觉得我的代码变得不那么清晰了。虽然是多余的，但是像updatefo、updateBar、updateBaz这样的函数清楚地描述了代码中的情况UpdateNameStates非常枯燥，但有时我觉得它比其他开发人员更聪明，更容易消化。想法？

使用命名良好的方法对本地组件状态执行特定更新没有什么错。实际上，我更喜欢它，因为这些方法通常会传递给下游的其他组件，从而使跟踪逻辑变得更容易

---

在每个方法中调用

this.setState

与DRY的概念几乎没有冲突

我想说的是，要记住的是，无论你选择什么样的模式和命名标准，都要尽量保持一致。如果您认为使用多个更新方法可以创建清晰易读的代码，那么请坚持使用它

我个人认为，创建可读代码不仅需要函数模式，而且命名标准也很重要。例如，我很少在组件中创建名称中带有

update…

的函数。对于我来说，命名标准作为操作处理程序更为常见。我尝试在组件内部使用名为

handle…

的方法，即

handleChange

、

handleClick

等。因此对

setState

的调用主要是从这些句柄函数内部调用的。如果这些方法被传递给子组件，它们将被分配给…属性上的

，即
onChange
，
onClick

但与您最初的问题相关，因为我有多个函数作为处理程序，所以对setState的调用在多个函数和上下文中重复

作为旁注，我确实在您的示例中看到了一个问题，即每次调用setState都将替换所有现有属性。例如，如果从初始状态开始

this.state = {
  foo: 1,
  bar: 2,
  baz: 3
};

然后调用
this.setState（{foo:num）}
，则该状态不再具有任何
条
或
baz
键/值，因为整个对象已被替换。ReactJS文档建议如何处理这个问题，就是使用它们的不可变助手函数
update
（请参阅）。根据您使用的React版本，您可以在不同的包中找到它

要仅更新一个键/值并保留其余键/值，请执行以下操作：

this.setState(update(this.state, {
  foo: { $set: "new value" }
}));


下面是一个我的项目中的基本组件的示例

从“../actions/UserActions”导入{updateUser}；
类MyComponent扩展组件{
建造师（道具）{
超级（）；
此.state={
首先：“，
最后:，
更改：错误
};
this.handleChangeFirst=this.handleChangeFirst.bind（this）；
this.handleChangeLast=this.handleChangeLast.bind（this）；
this.handleClickSave=this.handleClickSave.bind（this）；
}
handleChangeFirst（事件）{
这是我的国家({
第一：event.target.value，
变化：对
});
}
handleChangeLast（事件）{
这是我的国家({
最后：event.target.value，
变化：对
});
}
handleClickSave（）{
const{first，last}=this.state；
updateUser（{first，last}）；
这是我的国家({
更改：错误
});
}
render（）{
const{first，last，hasChanges}=this.state；
返回(
调用setState将使this.state引用新对象，但不会丢失以前的属性。setState仅覆盖传递到setState.object.assign（previousState，{foo:3}）的属性例如。另外，在这个例子中，使用setState updater函数有点过火。最后，如果您始终牢记永远不要改变组件的状态，我从未真正看到实现不可变的必要性，尤其是在这个例子中。我得到了纠正。我不知道
setState
的工作方式与
Object.assign
 .我已经使用这个模式很长时间了，我已经不记得这个假设是从哪里来的了。我同意在这种情况下这是过分的。我编辑了我的答案以反映这一点。