Question

有什么反应类似于vuejs中的保持活力吗？我不想在路线改变时重新渲染页面，任何人都可以帮助我吗？

Answer 1

似乎react不支持类似功能keep-alive。我们需要自己实施。

根据vue的source code of keep-alive组件，我们需要缓存状态中子节点的虚拟dom（vnode）。 keep-alive组件是路由器的包装器，因此在路由器更改时永远不会修剪缓存。

另外，如果你不关心，我的应用程序中有一个简单的方法表现。主要思想是在路由器更改事件上隐藏/显示视图组件，而不是mount / unmount。

<Router>
  <Layout>
    <Switch>
      <Route path="/foo" component={Foo} />
      <Route path="/bar" component={Bar} />
    </Switch>
    // the alive route match any path so that it will be never rerendered
    <Route path="/:any" component={AliveComponent} />
  <Layout>
</Router>

AliveComponent中的代码：

...
state = {isShown: false};
componentWillMount () {
  const {history, location} = this.props;
  this.setState({isShown: location.pathname === '/alive-view-path'});

  const unlistenHistory = history.listen(
    ({pathname, state}, action) => {
      this.setState({isShown: pathname === '/alive-view-path'});
    }
  );
  this.setState({unlistenHistory});
}
componentWillUnmount () {
  if (_.isFunction(this.state.unlistenHistory)) {
    this.state.unlistenHistory();
  }
}
render () {
  return <div style={{display: this.state.isShown ? 'block' : 'none'}} />
}
...

如何避免组件重新发送时路由更改类似于vuejs中的keep-alive？

1 个答案: