reactjs - React - 有一个主要的 setState 函数还是多个？

Question

我已经用 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);
}

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

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

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

编写updateManyStates函数后，我觉得我的代码变得不太清晰。尽管是多余的，但 updateFoo、updateBar、updateBaz 等函数清楚地显示了我的代码中发生的情况。 updateManyStates 非常枯燥，但有时我觉得它比其他开发人员更容易理解。想法？

Answer 1

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

在每个方法中调用 this.setState 与 DRY 的概念几乎没有冲突。