react前端路由和后端路由的区别有哪些

本篇内容主要讲解“react前端路由和后端路由的区别有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react前端路由和后端路由的区别有哪些”吧!

本篇内容主要讲解“react前端路由和后端路由的区别有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“react前端路由和后端路由的区别有哪些”吧!

react前端路由和后端路由的区别:1、前端路由通过“react-router”中的Link标签来触发,后端路由通过ajax来触发;2、前端路由基于浏览器事件监听,而后端路由基于http通讯协议;3、前端路由可以实现局部渲染,而后端路由实现重新渲染整个页面。

本教程操作环境:Windows10系统、react17.0.1版、Dell G3电脑。

react前端路由和后端路由的区别

后端路由的机制

懂后端的同学都知道,后端路由是后端在app.js中注册后端路由函数,前端通过ajax触发相应的路由回调函数(以express为例)

触发: ajax

响应: app.get('/router',callback)

原理: 基于http通讯协议

  1. //app.js
  2. app.get('/', (request, response) => {
  3.   let ret = {
  4.   "success": true,
  5.   "code": 200,
  6.   "message": "",
  7.   "data": [],
  8.   }
  9.   
  10.   response.send(ret)
  11. })

前端路由的机制

而前端路由(指react-router)是,前端在router.js中注册前端路由与组件映射,前端通过Link设置的路由或在浏览输入相应路由引起组件渲染:

触发: react-router中的Link标签

响应: 渲染Rout标签中对应组件

原理: 基于浏览器中hash(React-Router v2之前),history(React-Router v4)

  1. //index.js
  2. class ListContent extends Component {
  3.   constructor(props){
  4.     super(props);
  5.     this.state = {
  6.     }
  7.   }
  8.   
  9.   render() {
  10.     return (
  11.       <Row>
  12.           <Button>
  13. +            <Link to="/topic"> 发布话题 </Link>
  14.           </Button>
  15.       </Row>
  16.     );
  17.   }
  18. }
  19. //router.js
  20. <Router>
  21.     <div>
  22.       <Header/>
  23.           <Switch>
  24.             <Route exact path="/" component={index} />
  25.             <Route exact path="/topic" component={topic} />
  26.           </Switch>
  27.     </div>
  28. </Router>

在router.js中header组件会一直存在页面中, 而Switch标签中的组件只会在触发后渲染,可简单理解为未触发组件为null,不显示

所以形成了局部渲染

  1. //若触发前端路由'/topic',则index组件不渲染
  2. <Router>
  3.     <div>
  4.       <Header/>
  5.           <Switch>
  6.             <Route exact path="/" component={null} />
  7.             <Route exact path="/topic" component={topic} />
  8.           </Switch>
  9.     </div>
  10. </Router>

前端路由和后端路由的区别

前端路由基于浏览器事件监听,不通过http通讯协议

前端路由局部渲染, 后端重新渲染整个页面,相对来说前端路由体验好点

到此,相信大家对“react前端路由和后端路由的区别有哪些”有了更深的了解,不妨来实际操作一番吧!这里是恰卡网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
后端

react受控组件指的是什么

2022-6-28 20:39:50

后端

php创建数组的函数是什么

2022-6-28 20:39:53

搜索