Question

我是React.js的新手，但我正在构建一个使用它的单页应用程序。对于路由，我使用的是react-router。

我想组织页面的方式如下：我想要一个静态页眉和页脚（仅加载ONCE），然后页面内容将根据路径而改变。这里没什么特别的，这基本上是我对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>);
}

}

因此，当我访问该应用时，该组件应用程序＆＃39;加载，然后组件＆＃39; Home＆＃39;注入主要内容，因为它被声明为IndexRoute。

一切都很好，直到这里，问题是每次我从一个路线切换到另一个路线时，组件＆＃39;应用程序＆＃39;得到渲染（我知道它，因为我看到＆＃39;渲染应用程序＆＃39;登录控制台）。这是我不明白的，根据我的理解，在路线之间切换不应该触发“应用程序”的呈现。组件，但仅限于动态注入的组件。

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

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

Answer 1

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

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

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

为什么不是问题？

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

换句话说，对于生成相同HTML的Components，实际上不会做任何事情。您的页眉和页脚可能属于此类别。

这使得非常快。如果您关注性能，除了最苛刻的计算方案之外，您可以安全地将其从脑海中推出。

如果您非常想，则可以通过实施Component方法避免重新呈现shouldComponentUpdate()。

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

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

1 个答案:

为什么不是问题？