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

2019-11-19 00:36:38 阅读：267 来源： 互联网

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

我对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的神奇引擎将完成其余的工作.

标签：reactjs,react-router,react-router-redux,javascript
来源： https://codeday.me/bug/20191119/2032276.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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