Question

在基于某些状态（在props或state中）渲染时需要添加或删除组件时，我会看到很多这种模式。例如选项卡式UI或展开/折叠小部件。

render: function() {
  if (this.state.show) {
    var showRender = <Show />;
  } else {
    var showRender = <Hidden />;
  }

  return {showRender};
}

然而，问题是每次this.state.show更改，都会创建新的“显示”或“隐藏”。可能在Show的前一个实例中存在的旧状态或Show的某个深子组件已重新初始化。

当状态可能存在于多个组件和子组件中时，将状态移动到父级是不实际的。

我能想到的另一个解决方案是将"display: none"样式放在我想隐藏的组件上。但是如果我在任何地方应用这种模式，即使没有看到它，创建所有UI也会感觉很昂贵。

添加key="someValue"道具只要组件刚被移动而未完全移除即可。

还有其他模式吗？

Answer 1

建议

Flux架构来处理这种困境。通过引入商店和调度员的概念，它可以让您的组件摆脱无法管理的道具。以下是有关该主题的教程列表：https://github.com/enaqx/awesome-react#flux-tutorials

编辑：

我从一开始就没有采用Flux用于我的一个相当复杂的应用程序，现在它将成为实现它的一个重要的重构（以及其他改进）。作为一个停止差距，我开始使用内存消息总线模式用于新组件。我是一个自定义实现，但您可以使用像PostalJs这样的库。事实上有人也在尝试PostalJs mixin for React，这可能值得探讨。这个想法是组件将消息发布到总线以宣布动作，感兴趣的组件可以通过同一总线订阅消费。与Flux的主要区别在于：没有正式的“商店”，而消息总线则是一个美化的调度员。我之前没有提到这一点，因为在我目前的应用程序中它对我来说是妥协，而且Flux也是一种更安全的方法，因为社区的参与很多。感谢@FakeRainBrigand鼓励我分享这个其他想法。

Answer 2

状态是短暂的数据。如果需要持久保存，请在组件外部进行管理，并使用事件发射器允许组件侦听更改并请求更改。该组件将其绑定到getInitialState和事件侦听器中的状态。这没关系，因为它只是数据的本地视图。它仍然在外部保持安全。

更正式的版本是Flux，Gaurav提到过。有时简单的事件发射器就足够了，有时你真的需要调度程序，存储和操作。

保留已删除组件的状态

2 个答案: