我仍然对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，浏览器就可以预渲染屏幕外的图层）。
我已经尝试了六种方法来实现此目的，但是它们都非常笨拙，或者涉及重复复制匹配的代码。我究竟做错了什么？
另外，我想避免添加Redux之类的东西，只是为了尽可能地解决此问题。
所以您想要类似眼镜的东西吗？
在您的情况下，我会将所有屏幕都放置为该App组件的子级，并使用react-router的参数来了解您所处的屏幕。
<Route path="/(:screen)" component={App}>
它可以作为App组件的支持：
class App extends React.Component {
componentWillMount () {
this.props.params.screen
}
}
有关react-router / injected-props上的路由参数的更多信息
如果您在重新渲染时遇到麻烦，可以使用组件生命周期方法shouldComponentUpdate。返回false此方法将阻止组件重新渲染，并且您将拥有新的道具（还包括路线参数）。
class App extends React.Component {
shouldComponentUpdate (nextProps) {
nextProps.params.screen
return false
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句