3

我对 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”组件的渲染，而只能触发动态注入的组件。

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

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

4

1 回答 1

3

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

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

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

为什么不是问题？

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

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

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

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

不鼓励这样做：React 正在朝着无状态的功能组件发展，您应该尽可能尝试使用它们。在这种情况下，您的工作是保证相同的props内容将呈现相同的 HTML。React 的神奇引擎将完成剩下的工作。

于 2016-03-07T21:35:05.920 回答