可以从 shouldComponentUpdate 中调用 setState 吗？

Question

为了响应状态变化，我想触发另一个状态变化。这本质上是个坏主意吗？

具体的场景是组件被建模为状态机，根据this.state.current_state的值呈现不同的信息。但是外部事件可以促使它经历状态转换，通过通量存储改变它的状态。这是一个人为的场景来传达这个想法：

我认为正确的生命周期方法是shouldComponentUpdate。大意是这样的：

shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.counter > 4 && this.state.current_state !== DISPLAY_MANY) {
        this.setState({ current_state: DISPLAY_MANY });
    }
    return true;
}

在某些子组件中，counter 可能会增加，因此我不想根据某些 counter 变量的值来推断它会显示什么，而是想显式地对状态进行编码。

真实的场景比这更复杂，但希望这个场景足够详细，可以理解这个想法。可以按照我的想法去做吗？

编辑：修复代码示例，通过添加额外的状态条件来避免触发无限循环

Answer 1

shouldComponentUpdate 专门用于确定组件是否应该更新。执行以下操作：

if (nextState.counter == this.state.counter && nextProps.foo == this.Props.foo) {
  return false;
}

componentWillReceiveProps 用于响应 external (props) 的变化。正如文档中所指出的，没有等效的 componentWillReceiveState。您的组件（并且只有您的组件）触发它自己的状态更改，通常通过以下一个或多个事件：

• getInitialState 中的初始渲染
• 更新了componentWillReceiveProps中的道具
• <input> 字段等中的用户交互，例如在组件中的自定义 onChangeInput() 函数中。
• 不断变化：响应来自侦听器的存储更改，通常在调用 getStateFromStores() 的自定义函数中，其中状态已更新。

我猜在组件内部有一个函数来创建状态更改，然后在同一组件内部的另一个函数在状态更新之前进行干预是没有意义的。

在您的情况下，您可以将逻辑（以确定是否需要更新状态）移动到处理存储更新的 getStateFromStores() 函数。
或者，您可以简单地将其保持在状态，并更改您的渲染函数，以便在 counter > 4 时以不同的方式渲染。

Answer 2

没有。请改用componentWillReceiveProps。它具有与shouldComponentUpdate 相同的签名，您可以安全地在那里调用this.setState。