如何使用 react-router 创建单页应用程序答案

【问题标题】：How to create a Single Page Application using react-router如何使用 react-router 创建单页应用程序
【发布时间】：2016-06-21 06:13:05
【问题描述】：

我对 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 的工作原理，有人可以帮我吗？或者，如果我做错了什么，请告诉我什么是实现我需要的正确方法。

如果您需要查看任何其他代码，请不要犹豫。谢谢

【问题讨论】：

你为什么关心它的渲染频率？
无用的重新渲染只会降低性能

标签： javascript reactjs react-router react-router-redux

【解决方案1】：

App 组件被重新渲染，因为你说它是视图的根：

<Route path="/" component={App}>

这不是问题。 React 旨在重新渲染 Components，您应该牢记这一点。

为什么没有问题？

与大多数模板系统不同，React 所谓的渲染不一定涉及 DOM 更改。当 React “重新渲染”Component 时，它会计算将 DOM 从其当前状态变为所需状态的最小操作集。这可能是一个空集。

换句话说，对于生成相同 HTML 的 Components，实际上什么都不会做。您的页眉和页脚可能属于这一类。

这使它非常快。如果您关心的是性能，那么您可以放心地将其抛诸脑后，除了最苛刻的计算场景之外。

如果您真的想要，您可以通过实现shouldComponentUpdate() 方法来避免重新渲染您的Component。

不鼓励这样做：React 正在向stateless, functional components 发展，您应该尽可能尝试使用它们。在这种情况下，您的工作是保证相同的props 将呈现相同的 HTML。 React 的神奇引擎将完成剩下的工作。

【讨论】：