Reactjs 保留已移除组件的状态

在基于某种状态（道具或状态）渲染时，当需要添加或删除组件时，我经常看到这种模式。例如选项卡式UI或展开/折叠小部件

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

  return {showRender};
}

render:function（）{
if（this.state.show）{
var showRender=；
}否则{
var showRender=；
}
返回{showRender}；
}

但是，问题是每次

此.state.show

更改时，都会创建一个新的显示或隐藏。先前的Show实例或Show的某些深层子组件中可能存在的旧状态被重新初始化

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

我能想到的另一个解决方案是在我想要隐藏的组件上放置

“display:none”

样式。但是，如果我在任何地方都应用这种模式，那么即使看不到，创建所有UI也会让人感觉成本高昂

添加

key=“someValue”

道具在组件刚刚移动而未完全移除时起作用

还有其他模式吗？

建议使用体系结构来处理这种困境。它通过引入存储和分派器的概念，使您的组件从传递大量难以管理的道具的头痛中解脱出来。以下是有关该主题的教程列表：

编辑：

---

我从一开始就没有为我的一个相当复杂的应用程序采用Flux，现在要实现它（以及其他改进），需要进行一次大的重构。作为权宜之计，我开始为新组件使用内存中的消息总线模式。我的是一个自定义实现，但您可以使用类似的库。事实上，有人也在尝试一种新的方法，这可能是值得探索的。其思想是组件将消息发布到总线以宣布操作，感兴趣的组件可以通过同一总线订阅来使用这些消息。与Flux的主要区别在于：没有正式的“存储”，消息总线是一个美化的调度器。我之前避免提及这一点，因为在我目前的应用程序中，这对我来说是一种折衷，而Flux是一种更安全的方法，也因为它有大量的社区参与。感谢@FakeRainBrigand鼓励我分享另一个想法。

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

---

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

这如何解决OP给出的问题？@JeremyD，如果我理解正确的话，OP要求组件之间的通信采用其他模式，这些模式可能更易于维护。这就是我试图解决的问题。如果还有其他我没有解决的问题，请帮我解决。谢谢我想我没有真正理解这个问题。我以为他在想，当不得不在组件之间进行选择时，如何避免if/else情况，以及应该采取什么方法。谢谢你的回答。正如FakeRainBrigand在下面描述的，Flux确实解决了这个问题。使用焊剂将状态从反应组分中拉出。。。。如果/否则不是问题所在。添加和删除同一个组件以及每次重置其状态都是问题所在。对不起，我不清楚，我同意。虽然Flux是React-like组件的最终架构模式，但使用其他更简单的模式也可以产生类似的效果——关键是在组件外部管理数据（或“模型”），并通过事件而不是直接通过组件传递数据。事实上，我目前一直坚持这样一种折衷模式，因为我在一开始没有采用Flux，而重构在这个阶段是一个很大的风险。我认为在我的回答中也值得一提，让人们自己决定什么最适合他们。谢谢你的回答。我认为这有助于我更清楚地理解一些想法。反应组分状态是短暂的。将状态从组件中提取出来并放入外部存储器（在通量中）或其他模型是解决问题的一种方法。