在基于某些状态（在props或state中）渲染时需要添加或删除组件时，我会看到很多这种模式 . 例如选项卡式UI或展开/折叠小部件 .
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也会感觉很昂贵 .
只要组件刚刚移动而未完全移除，添加 key="someValue" prop就可以正常工作 .
还有其他模式吗？
2 回答
状态是短暂的数据 . 如果需要持久保存，请在组件外部进行管理，并使用事件 Launcher 允许组件侦听更改并请求更改 . 该组件将其绑定到getInitialState和事件侦听器中的状态 . 这没关系，因为它只是数据的本地视图 . 外部仍然保持安全 .
更正式的版本是Flux，Gaurav提到过 . 有时简单的事件 Launcher 就足够了，有时您确实需要调度程序，存储和操作 .
建议采用Flux架构来处理这种困境 . 通过引入商店和调度员的概念，它可以让您的组件摆脱无法管理的道具 . 以下是有关该主题的教程列表：https://github.com/enaqx/awesome-react#flux-tutorials
编辑：
我没有't adopted Flux from the beginning for one of my rather complex apps, and now it'将是一个很大的重构实现它（以及其他改进） . 作为一个停止差距，我开始使用内存消息总线模式用于新组件 . 我是一个自定义实现，但您可以使用像PostalJs这样的库 . 事实上有人也在尝试PostalJs mixin for React，这可能值得探索 . 这个想法是组件将消息发布到总线以宣布动作，感兴趣的组件可以通过同一总线订阅消费 . 与Flux的主要区别在于：在我目前的应用程序中，对我来说是一个妥协，而Flux也是一种更安全的方法，因为社区的参与很多 . 感谢@FakeRainBrigand鼓励我分享这个其他想法 .