react前端路由和后端路由的区别是什么

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

react前端路由和后端路由的区别是什么

本教程操作环境: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

(0)
上一篇 2025年3月11日 19:36:49
下一篇 2025年2月28日 04:20:45

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react受控组件是什么

    在react中,受控组件指的是通过回调函数来更新当前值的组件;渲染表单的React组件还控制着用户输入过程中表单发生的操作,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件。 本教程操作环境:Wi…

    2025年3月11日
    000
  • react高阶函数的定义是什么

    在react中,高阶函数的定义是若一个指定的函数接收的参数是另一个函数或者调用的返回值依然是一个函数,那么这个指定的函数就被称为高阶函数;常见的高阶函数有Promise、setTimeout、“arr.map()”等等。 本教程操作环境:W…

    2025年3月11日
    200
  • react非受控组件是什么意思

    在react中,非受控组件是不被父组件控制的组件;非受控组件也就是一个独立组件,不需要传值也没有任何与当前组件的父组件有所交集,在封装组件时,只有在当前组件只做展示用途且没有任何不同的时候才会封装为非受控组件。 本教程操作环境:Window…

    2025年3月11日
    200
  • react同构应用是什么

    在react中,同构应用指的是在客户端和服务端之间完整或者部分共享代码的应用,也可以被称为通用JavaScript应用;同构应用并不是不需要浏览器端渲染内容,而是使服务端和浏览器端渲染达到一种平衡,在服务器上生成渲染内容,让用户尽早看到有信…

    2025年3月11日
    200
  • react中context是什么

    在react中,context是一个无需为每层组件手动添加props就能在组件树之间进行数据传递的方法;context提供了一种在组件之间共享指定值的方式,而且不必显式的通过组件树的逐层传递props。 本教程操作环境:Windows10系…

    2025年3月11日
    200
  • react是单向数据流还是双向的

    react是单向数据流,不是双向的;单向数据流指的是数据在某个节点被改动后,只会影响一个方向上的其他节点,而双向绑定指的是数据模型与视图之间绑定,会影响不同方向上的其他节点,React中的表现就是数据主要通过props从父节点传递到子节点,…

    2025年3月11日
    200
  • react有组件库吗

    react有组件库;组件库是通过多维度组合来构建,将组件整理在一起的设计方案;组件设计是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,react常用的组件库有Bulma、AntDesign、Boots…

    2025年3月11日 编程技术
    200
  • react虚拟dom有什么用处

    react虚拟dom的用处:1、提升react代码性能,虚拟DOM是一个js对象,创建一个js对象消耗的性能和创建一个真实DOM要小很多,把创建真实DOM替换为创建虚拟DOM就会有极大的性能上的提升;2、实现跨端应用,在浏览器端是将虚拟DO…

    2025年3月11日
    200
  • react路由传值有几种方式

    react路由传值有三种方式:1、“props.params”方法,该方法可以传递一个或多个值,但是每个值的类型都是字符串,没法传递一个对象;2、query方法,该方法类似于表单中的get方法,传递参数为明文,但是刷新页面参数会丢失;3、s…

    2025年3月11日
    200
  • vue和react的数据流有什么区别

    vue和react的数据流区别是:vue是响应式的数据双向绑定系统,也即双向绑定数据流,当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化;而react是单向数据流,没有双向绑定,数据主要从父组件流向子组件。…

    2025年3月11日
    200

发表回复

登录后才能评论