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

Question

我对 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')
);

这是基本包含单个页面结构的组件应用程序:

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”被注入(inject)到主要内容中，因为它被声明为 IndexRoute。

到这里为止一切都很好，问题是每次我从一个路由切换到另一个路由时，组件“App”都会被渲染(我知道它是因为我在控制台中看到了“Rendering App”日志)。这是我不明白的，据我所知，路由之间的切换不应该触发“App”组件的渲染，而应该只触发动态注入(inject)的组件。

我不希望每次切换路由时都呈现页眉和页脚，恕我直言，这是拥有单页应用程序的好处。也许我不太了解 react-router 的工作原理，有人可以帮我吗？或者，如果我做错了什么，请告诉我什么是实现我需要的正确方法。

如果您需要查看任何其他代码，请随时询问。谢谢

Answer 1

App 组件被重新渲染，因为你说它是 View 的根:

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

这不是问题。 React 旨在重新呈现 Components，您在编写组件时应牢记这一点。

为什么不是问题？

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

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

这使得它非常很快。如果性能是您关心的问题，您可以安全地将它从您的脑海中排除，除了要求最苛刻的计算场景。

如果您确实想要，您可以通过实现shouldComponentUpdate() 方法来避免重新呈现您的组件。

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