Question

我还在处理React和react-router，但我想知道如何使用react-router简单地更新应用程序状态而不重新渲染DOM节点。

例如，假设我有：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute screen="main" />
    <Route path="settings" screen="sync" />
    <Route path="overview" screen="overview" />
  </Route>
</Router>

我想重新使用react-router的匹配，只需更新App组件的当前屏幕。

原因是假设在上面的例子中我有三个水平排列的屏幕，一次只能看到一个。当路线改变时，我想在适当的屏幕中进行动画制作。如果我通过为每个路由分配一个组件来做到这一点，则在路由匹配之前，react-router不会呈现其他屏幕，并且屏幕滑入会有明显的延迟。

但是，如果我将所有三个屏幕保留在DOM中并且只是切换状态以触发CSS转换，则没有延迟（因为，通过适当使用will-change，浏览器可以预渲染屏幕外层）。

我已经尝试了六种方法来实现这一点，但它们都非常hacky或涉及重复匹配代码。我做错了什么？

另外，我想避免添加像Redux这样的东西来解决这个问题。

Answer 1

所以你想要类似于Spectacle的东西？

在您的情况下，我会将所有屏幕作为if($loadingimage==true){}组件的子项放置，并使用react-router的参数来了解您所在的屏幕。

App

它可以作为<Route path="/(:screen)" component={App}>组件的道具：

App

有关react-router/injected-props

的路线参数的更多信息

如果您在重新渲染时遇到问题，可以使用组件生命周期方法shouldComponentUpdate。在此方法中返回class App extends React.Component { componentWillMount () { this.props.params.screen } }将阻止组件重新呈现，并且您将拥有新的道具（还包括路径参数）。

false

如何使用react-router来触发状态更改？

1 个答案: