从 shouldComponentUpdate 内部调用 setState 可以吗？

IT技术 reactjs reactjs-flux flux
2021-05-14 18:07:04

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

特定类型的场景是将组件建模为状态机，根据 的值呈现不同的信息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变量的值推断它将显示的内容，不如对状态进行显式编码。

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

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

2个回答

shouldComponentUpdate专门用于确定组件是否应该更新。做这样的事情：

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

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

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

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

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

不，请componentWillReceiveProps改用。它具有相同的签名，shouldComponentUpdate您可以安全地在this.setState那里打电话。

其它你可能感兴趣的问题
上一篇3D850 卡在喷嘴中 下一篇丝杠的尺寸是多少