reactjs - setState 的多种方法而不是单一方法

Question

我正在开发一个 React 应用程序，没有 Redux 或任何其他状态管理器。

假设我想在单击按钮时执行三件事:

1. 启用其他一些按钮
2. 删除标签
3. 显示确认 toastr

这三件事是由状态的三个变量控制的。因此我可以简单地这样做:

myHandler = () => {
    this.setState({
        canSave: true,                      // Enable the button
        isLabelVisible: false,              // Hide label
        isConfirmationMessageVisible: true, // Show confirmation message
    });
}

但是，我可以通过使用一些私有(private)类函数来消除这些注释，如下所示:

myHandler = () => {
    this.toggleSaveButton(true);
    this.toggleLabel(false);
    this.toggleConfirmationMessage(true);
}

toggleSaveButton= (enabled) => {
    this.setState({
        canSave: enabled,
    });
}

toggleLabel= (visible) => {
    this.setState({
        isLabelVisible: visible,
    });
}

toggleConfirmationMessage= (visible) => {
    this.setState({
        isConfirmationMessageVisible: visible,
    });
}

除了删除那些很容易与代码不同步的注释之外，这还允许我在代码的其他位置重用私有(private)方法。

由于这是在合成事件中处理的，因此我已阅读 here它将被批量处理，所以我预计不会有性能损失。

我的问题是:这是好的做法吗？你用过这个方法吗？您能指出一些我现在无法预见的潜在缺点吗？

Answer 1

这完全没问题。正如您所提到的，React 会对事件处理程序触发的所有状态更新进行批处理。这意味着您可以像在这里一样安全地使用多个 setState()。

In current release, they will be batched together if you are inside a React event handler. React batches all setStates done during a React event handler, and applies them just before exiting its own browser event handler.

您唯一需要注意的是，是否通过两次 setState() 调用两次更改相同的状态。例如:

a() {
  this.setState({foo: foo+1});
}
b() {
  this.setState({foo: foo+1});
}

在同一事件中调用 a()，然后调用 b()，会将 foo 增加 1，而不是 2。

改为使用:

a() {
  this.setState(prevState => ({foo: foo+1}));
}
b() {
  this.setState(prevState => ({foo: foo+1}));
}

这将正确地将 foo 增加 2。

<小时/>

对于 future 不从事件处理程序调用多个setState()的潜在读者，我应该注意以下几点:

With current version, several setStates outside of event handlers (e.g. in network responses) will not be batched. So you would get two re-renders in that case.

<小时/>

替代解决方案

无论您是否从事件处理程序调用 setState()，您都可以做的是构建一个对象，然后将其设置为新状态。这里的潜在好处是您只需设置一次状态，因此不依赖于批处理或从何处触发函数(是否有事件处理程序)。

所以类似:

myHandler = () => {
    let obj = {}
    obj = this.toggleSaveButton(obj, true);
    obj = this.toggleLabel(obj, false);
    obj = this.toggleConfirmationMessage(obj, true);
    this.setState(obj);
}

toggleSaveButton= (obj, enabled) => {
    obj.canSave = enabled;
    return obj;
}

toggleLabel= (visible) => {
    obj.isLabelVisible = visible;
    return obj;
}

toggleConfirmationMessage= (visible) => {
    obj.isConfirmationMessageVisible = visible;
    return obj;
}