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通讯协议
//app.jsapp.get('/', (request, response) => { let ret = { "success": true, "code": 200, "message": "", "data": [], } response.send(ret)})
登录后复制
前端路由的机制
而前端路由(指react-router)是,前端在router.js中注册前端路由与组件映射,前端通过Link设置的路由或在浏览输入相应路由引起组件渲染:
触发: react-router中的Link标签
响应: 渲染Rout标签中对应组件
原理: 基于浏览器中hash(React-Router v2之前),history(React-Router v4)
//index.jsclass ListContent extends Component { constructor(props){ super(props); this.state = { } } render() { return ( ); }}//router.js
登录后复制
在router.js中header组件会一直存在页面中, 而Switch标签中的组件只会在触发后渲染,可简单理解为未触发组件为null,不显示
所以形成了局部渲染
//若触发前端路由'/topic',则index组件不渲染
登录后复制
前端路由和后端路由的区别
前端路由基于浏览器事件监听,不通过http通讯协议
前端路由局部渲染, 后端重新渲染整个页面,相对来说前端路由体验好点
【相关推荐:javascript视频教程、web前端】
以上就是react前端路由和后端路由的区别是什么的详细内容,更多请关注【创想鸟】其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。
发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2928476.html