Question

Vue保持活动元素将在返回历史页面时记住页面状态，希望React具有类似的功能。

Answer 1

React没有这种功能，最近在同一问题上的维护者response强烈表示他们认为这不是一个好主意。但是，同一线程讨论了一种标准替代方法，该替代方法是实现您的逻辑，以便您不删除/创建组件，而是隐藏并显示它们。例如，如果您这样做是为了支持“标签”：

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

然后，当选择第二个选项卡时，MyFirstTabView显然会被破坏。但是，如果您采用这种方式：

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

并将其与CSS display: none或display: block规则配对，将实现与Vue的keep-alive功能类似的功能。它效率不高，但是对于选项卡切换这样的常见用例来说，它是很接近的。

Answer 2

React 提供通过一个包保持活力。要安装此软件包，安装运行：

npm install --save react-keep-alive

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';
 
ReactDOM.render(
  <Provider>
    <KeepAlive name="Test">
      <Test />
    </KeepAlive>
  </Provider>,
  document.getElementById('root'),
);

React是否有类似Vue的keep-alive元素的东西？

2 个答案: