保留已移除组件的状态

Question

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

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

  return {showRender};
}

但是，问题是每次 this.state.show 更改时，都会创建一个新的 Show 或 Hidden。可能存在于 Show 的先前实例或 Show 的某些深层子组件中的旧状态被重新初始化。

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

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

只要组件只是被移动而不是完全移除，添加 key="someValue" 属性就可以。

还有其他模式吗？

Answer 1

Flux architecture was recommended to deal with exactly this kind of dilemma. It frees up your components from the headache of passing around unmanageable amount of props by introducing the concepts of Stores and Dispatchers. Here's a list of tutorials on the subject: https://github.com/enaqx/awesome-react#flux-tutorials

编辑：

对于我的一个相当复杂的应用程序，我从一开始就没有采用 Flux，现在它将是一个重大的重构来实现它（以及其他改进）。作为权宜之计，我开始为新组件使用内存中的消息总线模式。我的是自定义实现，但您可以使用像 PostalJs. In fact somebody is also attempting a PostalJs mixin for React 这样的库，这可能值得探索。这个想法是组件向总线发布消息以宣布操作，感兴趣的组件可以通过同一总线订阅来使用这些消息。与 Flux 的主要区别在于：没有正式的 "Store"，消息总线是一个美化的调度程序。我之前避免提及这一点，因为这对我当前的应用程序来说是一种妥协，而 Flux 是一种更安全的方法，还因为它有大量的社区参与。感谢@FakeRainBrigand 鼓励我也分享这个想法。

Answer 2

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

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

保留已移除组件的状态

Preserving state of removed components

reactjs