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用于响应外部（道具）更改。正如文档中所指出的，没有等效的componentWillReceiveState。您的组件（以及您的组件）通常通过以下一个或多个事件触发它自己的状态更改：

getInitialState
更新componentWillReceiveProps
<input>字段等中的用户互动，例如在组件中的自定义onChangeInput()函数中。
in flux：响应来自侦听器的商店更改，通常是调用getStateFromStores()的自定义函数，其中状态已更新。

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

在您的情况下，您可以将逻辑（以确定是否需要更新状态）移动到处理商店更新的getStateFromStores()功能。
或者，您可以简单地将其置于状态，并更改您的渲染功能，以便在计数器＆gt;时呈现不同的渲染功能。 4。

Answer 2

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

可以从shouldComponentUpdate中调用setState吗？

2 个答案: