我对React.js很陌生,但是我正在使用它构建一个单页应用程序.
对于路由,我正在使用react-router.
我要组织页面的方式如下:我想要一个静态的页眉和页脚(仅加载一次),然后页面的内容将根据路由而变化.这里没什么特别的,这基本上是我对SPA的理解.
这是main.js,它使用以下路线引导我的应用程序:
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="shop-filters-left-3cols" component={ShopFiltersLeft3Cols}/>
<Route path="about" component={About}/>
<Route path="login" component={Login}/>
</Route>
</Router>
</Provider>,
document.getElementById('main')
);
这是组件App,它基本上包含单个页面的结构:
export class App extends React.Component {
constructor(){
super();
this.render = this.render.bind(this);
}
render() {
console.log('Rendering App');
return (<div>
<LoginModal />
<Header/>
<div className="page-content">
{this.props.children}
</div>
<Footer/>
</div>);
}
}
因此,当我访问应用程序时,将加载组件“ App”,然后将组件“ Home”注入到声明为IndexRoute的主要内容中.
直到这里一切都很好,问题在于每次我从一条路线切换到另一条路线时,都会渲染组件“ App”(之所以知道是因为我在控制台中看到了“ Rendering App”日志).据我所知,这是我不了解的,在路由之间切换不应触发“ App”组件的渲染,而不会触发动态注入的组件.
我不希望每次切换路线时都显示页眉和页脚,恕我直言,拥有单个页面应用程序的好处.
也许我对React-router的工作方式不太了解,有人可以帮我吗?或者,如果我做错了什么,请告诉我什么是实现我所需要的正确方法.
如果您需要查看其他任何代码,请随时询问.谢谢
解决方法:
App组件被重新渲染,因为您说它是视图的根:
<Route path="/" component={App}>
这不是问题. React旨在重新渲染组件,因此您应牢记这一点.
为什么没有问题?
与现有的大多数模板系统不同,React所谓的渲染不一定涉及DOM更改.当React“重新渲染”一个组件时,它会计算将DOM从其当前状态变为所需状态的最小操作集.这可能是一个空集.
换句话说,对于产生相同HTML的组件,实际上什么也不会做.您的页眉和页脚可能属于此类.
这使其非常快.如果您关心性能,那么除了最苛刻的计算方案外,您可以放心地将其排除在外.
如果确实需要,可以通过实现shouldComponentUpdate()方法来避免重新渲染组件.
不鼓励这样做:React正在朝着stateless, functional components前进,您应该尝试尽可能使用它们.在这种情况下,您的工作是确保相同的道具将呈现相同的HTML. React的神奇引擎将完成其余的工作.