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

Nat*_* Gu 6 reactjs vue.js

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

Cha*_*son 5

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

{this.state.activeTab === 1 &&
<MyFirstTabView/>
}
{this.state.activeTab === 2 &&
<MySecondTabView/>
}
Run Code Online (Sandbox Code Playgroud)

那么 MyFirstTabView 显然会在选择第二个选项卡时被销毁。但是,如果您这样做:

<MyFirstTabView className={this.state.activeTab === 1 ? 'active' : ''}/>
<MySecondTabView className={this.state.activeTab === 2 ? 'active' : ''}/>
Run Code Online (Sandbox Code Playgroud)

并将其与 CSSdisplay: nonedisplay: block规则配对,它将实现与 Vue 的keep-alive功能类似的功能。它的效率并不高,但对于选项卡切换等常见用例,它很接近。