一、问题背景
一个路由往往代表一个地址，即一个页面。但同级网页页面的内容有很多是重复的，如果每次加载页面都要加载这些“共有”内容，会导致效率的降低。因此，单页面应用应运而生。它主张在同一页面下将“共同”部分隔离固定下，对需要变换的局部作跳转导航，这样避免了重复渲染，大大提高了效率。此种方法被大量应用在MVVM框架上。
二、方案
1.react-router
定义路由
1
2
3
4
5
6
| <Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
Route>
Router>
|
使用路由
1
2
3
4
5
6
7
| export default React.createClass({
render() {
return <div>
{this.props.children}
div>
}
})
|
2.if..else判断
1
2
3
4
5
6
7
| if( choose == '/' ) {
return <Root />;
} else if( choose == 'repos' ) {
return <Repos />;
} else if( choose == 'about' ) {
return <About />;
}
|
目前两种方案并没有太大的效果差别。效率差别还需进一步测试。
