时间戳

首页 > 解决方案 > React 有类似 Vue 的 keep-alive 元素吗？

reactjs - React 有类似 Vue 的 keep-alive 元素吗？

问题描述

Vue keep-alive 元素会在返回历史页面时记住页面状态，希望 React 有这样的东西。

标签： reactjsvue.js

解决方案

React 没有这种类型的功能，最近维护者对同一问题的回应非常强烈地表明他们认为这不是一个好主意。但是，同一个线程讨论了一个标准替代方案，即实现您的逻辑，这样您就不会删除/创建组件，而是隐藏和显示它们。例如，如果你做了这样的事情来支持“标签”：

{this.state.activeTab === 1 &&
<MyFirstTabView/>
}
{this.state.activeTab === 2 &&
<MySecondTabView/>
}

then MyFirstTabView will obviously be destroyed when the second tab is selected. 但是，如果您这样做：

<MyFirstTabView className={this.state.activeTab === 1 ? 'active' : ''}/>
<MySecondTabView className={this.state.activeTab === 2 ? 'active' : ''}/>

display: none并将其与 CSS或规则配对display: block，它将实现与 Vue 的功能类似的keep-alive功能。它的效率并不高，但对于标签切换等常见用例来说，它已经很接近了。

推荐阅读