当前位置： 首页 > news >正文

React 第二十九章 React 和 Vue 描述页面的区别

news 2025/12/12 2:08:04

面试题：React 和 Vue 是如何描述 UI 界面的？有一些什么样的区别？
标准且浅显的回答：
React 中使用的是 JSX，Vue 中使用的是模板来描述界面

前端领域经过长期的发展，目前有两种主流的描述 UI 的方案：

  • JSX
  • 模板

JSX 历史来源

JSX 最早起源于 React 团队。在 React 中所提供的一种类似于 XML 的 ES 语法糖：

const element = <h1>Hello</h1>

经过 Babel 编译之后，就会变成：

// React v17 之前
var element = React.createElement("h1", null, "Hello");// React v17 之后
var jsxRuntime = require("react/jsx-runtime");
var element = jsxRuntime.jsx("h1", {children: "Hello"});

无论是 17 之前还是 17 之后，执行了代码后会得到一个对象：

{"type": "h1","key": null,"ref": null,"props": {"children": "Hello"},"_owner": null,"_store": {}
}

这个其实就是大名鼎鼎的虚拟 DOM。

React 团队认为，UI 本质上和逻辑是有耦合部分的，例如：

  • 在 UI 上面绑定事件
  • 数据变化后通过 JS 去改变 UI 的样式或者结构

作为一个前端工程师，JS 是用得最多，所以 React 团队思考屏蔽 HTML，整个都用 JS 来描述 UI。因为这样做的话，可以让 UI 和逻辑配合得更加紧密，所以最终设计出来了类 XML 形式的 JS 语法糖

由于 JSX 是 JS 的语法糖（本质上就是 JS），因此可以非常灵活的和 JS 语法组合使用，例如：

  • 在 if 或者 for 当中使用 jsx
  • 将 jsx 赋值给变量
  • 将 jsx 当作参数来传递
  • 在一个函数中返回一段 jsx

示例代码

function App({isLoading}){if(isLoading){return <h1>loading...</h1>}return <h1>Hello World</h1>;
}

这种灵活性就使得 jsx 可以轻松的描述复杂的 UI，如果和逻辑配合，还可以描述出复杂 UI 的变化。

使得 React 社区的早期用户可以快速实现各种复杂的基础库，丰富社区生态。又由于生态的丰富，慢慢吸引了更多的人来参与社区的建设，从而源源不断的形成了一个正反馈。

模板的历史来源

模板的历史就要从后端说起。

在早期前后端未分离的时候，最流行的方案就是使用模板引擎。模板引擎可以看作是在正常的 HTML 上面进行挖坑（不同的模板引擎语法不一样），挖了坑之后。服务器端会将数据填充到挖了坑的模板里面，生成对应的 html 页面返回给客户端。

image-20211103140631869

所以在那个时期前端人员的工作，主要是 html、css 和一些简单的 js 特效（轮播图、百叶窗…）。写好的 html 是不能直接用的，需要和后端确定用的是哪一个模板引擎，接下来将自己写好的 html 按照对应模板引擎的语法进行挖坑

image-20211103143319523

不同的后端技术对应的有不同的模板引擎，甚至同一种后端技术，也会对应很多种模板引擎，例如：

  • Java（JSP、Thymeleaf、Velocity、Freemarker）
  • PHP（Smarty、Twig、HAML、Liquid、Mustache、Plates）
  • Python（pyTenjin、Tornado.template、PyJade、Mako、Jinja2）
  • node.js（Jade、Ejs、art-template、handlebars、mustache、swig、doT）

模板引擎代码片段

  • twig 模板引擎
基本语法
{% for user in users %}* {{ user.name }}
{% else %}No users have been found.
{% endfor %}指定布局文件
{% extends "layout.html" %}
定义展示块
{% block content %}Content of the page...
{% endblock %}
  • blade 模板引擎
<html><head><title>应用程序名称 - @yield('title')</title></head><body>@section('sidebar')这是 master 的侧边栏。@show<div class="container">@yield('content')</div></body>
</html>
  • EJS 模板引擎
<h1><%=title %>
</h1>
<ul><% for (var i=0; i<supplies.length; i++) { %><li><a href='supplies/<%=supplies[i] %>'><%= supplies[i] %></a></li><% } %>
</ul>

这些模板引擎对应的模板语法就和 Vue 里面的模板非常的相似。

现在随着前后端分离开发的流行，已经没有再用模板引擎的模式了，后端开发人员只需要书写数据接口即可。但是如果让一个后端人员来开前端的代码，那么 Vue 的模板语法很明显对于后端开发人员来讲要更加亲切一些。

最后我们做一个总结，虽然现在前端存在两种方式：JSX 和模板的形式都可以描述 UI，但是出发点是不同

  • 模板语法的出发点是，既然前端框架使用 HTML 来描述 UI，那么我们就扩展 HTML。让 HTML 种能够描述一定程度的逻辑，也就是“从 UI 出发，扩展 UI，在 UI 中能够描述逻辑”。

  • JSX 的出发点，既然前端使用 JS 来描述逻辑，那么就扩展 JS，让 JS 也能描述 UI，也就是“从逻辑出发，扩展逻辑，描述 UI”。

这两者虽然都可以描述 UI，但是思路或者说方向是完全不同的，从而造成了整体框架架构上面也是不一样的。

真题解答

题目：React 和 Vue 是如何描述 UI 界面的？有一些什么样的区别？

参考答案

在 React 中，使用 JSX 来描述 UI。因为 React 团队认为UI 本质上与逻辑存在耦合的部分，作为前端工程师，JS 是用的最多的，如果同样使用 JS 来描述 UI，就可以让 UI 和逻辑配合的更密切。

使用 JS 来描述页面，可以更加灵活，主要体现在：

  • 在 if 语句和 for 循环中使用 JSX
  • 将 JSX 赋值给变量
  • 可以把 JSX 当作参数传入
  • 在函数中返回 JSX

而模板语言的历史则需要从后端说起。早期在前后端未分离时代，后端有各种各样的模板引擎，其本质是扩展了 HTML，在 HTML 中加入逻辑相关的语法，之后在动态的填充数据进去。
如果单看 Vue 中的模板语法，实际上和后端语言中的各种模板引擎是非常相似的。

总结起来就是：

模板语法的出发点是，既然前端框架使用 HTML 来描述 UI，那么就扩展 HTML 语法，使它能够描述逻辑，也就是“从 UI 出发，扩展 UI，在 UI 中能够描述逻辑”。

而 JSX 的出发点是，既然前端使用 JS 来描述逻辑，那么就扩展 JS 语法，让它能够描述 UI，也就是“从逻辑出发，扩展逻辑，描述 UI”。

虽然这两者都达到了同样的目的，但是对框架的实现产生了不同的影响。

相关文章：

React 第二十九章 React 和 Vue 描述页面的区别

面试题&#xff1a;React 和 Vue 是如何描述 UI 界面的&#xff1f;有一些什么样的区别&#xff1f; 标准且浅显的回答&#xff1a; React 中使用的是 JSX&#xff0c;Vue 中使用的是模板来描述界面 前端领域经过长期的发展&#xff0c;目前有两种主流的描述 UI 的方案&#xf…...

编程日记 2024/5/10 11:39:47

Dnspy附加进程调试---代码被优化及无法获取局部变量

代码被优化或者无法获取局部变量的效果图如下&#xff1a; 当你在调试的时候&#xff0c;看到这种情况还是挺恼火的&#xff0c;经过查阅资料后&#xff0c;发现可以这种解决&#xff1a; 参考链接&#xff1a;Making an Image Easier to Debug dnSpy/dnSpy Wiki GitHub 假设…...

编程日记 2024/5/10 11:36:43

Redis---------实现更改数据业务，包括缓存更新，缓存穿透雪崩击穿的处理

三种更新策略 内存淘汰是Redis内存的自动操作&#xff0c;当内存快满了就会触发内存淘汰。超时剔除则是在存储Redis时加上其有限期(expire)&#xff0c;有限期一过就会自动删除掉。而主动更新则是自己编写代码去保持更新&#xff0c;所以接下来研究主动更新策略。 主动更新策略…...

编程日记 2024/5/10 11:35:42

蓝牙小车的具体实现

title: 蓝牙小车开发时的一些细节 cover: >- https://tse1-mm.cn.bing.net/th/id/OIP-C.BrSgB91U1MPHGyaaZEqcbwHaEo?w273&h180&c7&r0&o5&dpr1.3&pid1.7 abbrlink: 842d5faf date: tags: #小车基本运动之最重要的—PWM ##1.PWM&#xff08;Pulse …...

编程日记 2024/5/10 11:34:41

污染修复乙级设计资质中关于设计成果保护的规定

关于污染修复乙级设计资质中设计成果的保护&#xff0c;虽然直接针对该资质的设计成果保护规定可能未在公开资料中有详细阐述&#xff0c;但根据中国知识产权法律体系和行业惯例&#xff0c;设计成果作为智力成果的一部分&#xff0c;主要受以下几个方面的法律保护&#xff1a;…...

编程日记 2024/5/10 11:33:39

##10 卷积神经网络（CNN）：深度学习的视觉之眼

文章目录 前言1. CNN的诞生与发展2. CNN的核心概念3. 在PyTorch中构建CNN4. CNN的训练过程5. 应用：使用CNN进行图像分类5. 应用：使用CNN进行时序数据预测代码实例7. 总结与展望前言 在深度学习的领域中，卷积神经网络（CNN）已经成为视觉识别任务的核心技术。自从AlexNet在2…...

编程日记 2024/5/10 11:31:37

Linux下添加自己的服务脚本（service）

systemd服务文件（service file）是用来定义和配置systemd服务的文件，通常以.service为后缀。以下是service文件的详细格式和内容说明： 1 文件路径 /etc/systemd/system（供系统管理员和用户使用）系统服务，开机不需要登录就能运行的程序/usr/lib/systemd/system（供发行版…...

编程日记 2024/5/10 11:28:33

C++:内存管理

C:内存管理 一、C/C内存分布二、C语言中动态内存管理方式&#xff1a;malloc/calloc/realloc/free三、C内存管理方式1.new/delete操作内置类型2.new和delete操作自定义类型 四、operator new与operator delete函数&#xff08;重点&#xff09;五、new和delete的实现原理1.内置…...

编程日记 2024/5/10 11:27:31

Veeam - 数据保护和管理解决方案_Windows平台部署备份还原VMware手册

Veeam - - 数据保护和管理解决方案 Veeam Backup & Replication Console Veeam Data Platform Veeam Backup & Replication是一款强大的虚拟机备份、恢复和复制解决方案 安全备份、干净恢复和数据弹性 — 即时交付 在混合云中随时随地管理、控制、备份和恢复您的所有数…...

编程日记 2024/5/10 11:26:30

易基因：Nature子刊：ChIP-seq等揭示c-di-AMP与DasR互作以调控细菌生长、发育和抗生素合成｜项目文章

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 c-di-AMP是一种在细菌信号中普遍存在且至关重要的核苷酸第二信使&#xff0c;对于大多数c-di-AMP合成生物体来说&#xff0c;c-di-AMP稳态及其信号转导的分子机制非常值得关注。 2024年…...

编程日记 2024/5/10 11:24:27

stm32学习探究：利用TB6612驱动直流电机

在这篇文章中&#xff0c;我们将探讨如何使用STM32微控制器和TB6612FNG直流电机驱动模块来驱动直流电机。TB6612FNG是一款基于MOSFET的H桥集成电路&#xff0c;能够独立双向控制两个直流电机&#xff0c;非常适合用于小型机器人或双轮车等项目。 一、TB6612FNG 驱动模块介绍 …...

编程日记 2024/5/10 11:22:24

SpringBatch快速入门

Job监听 Spring Batch的Job监听是一种机制&#xff0c;用于在Job的不同阶段插入自定义的逻辑。它允许开发人员在Job开始、结束、失败等不同的事件发生时执行特定的操作。 具体来说&#xff0c;Spring Batch提供了以下几个Job监听器&#xff1a; JobExecutionListener&#xff…...

编程日记 2024/5/10 11:21:22

下载Node.js及其他环境推荐nvm

文章目录 项目场景&#xff1a;下载Node.js环境配置配置环境变量 安装脚手架安装依赖安装淘宝镜像安装 cnpm&#xff08;我需要安装&#xff09;nvm 安装 Node.js &#xff08;推荐&#xff09; 项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 项目…...

编程日记 2024/5/10 11:20:21

STM32 ADC学习

ADC Analog-to-Digital Converter&#xff0c;即模拟/数字转换器 常见ADC类型 分辨率和采样速度相互矛盾&#xff0c;分辨率越高&#xff0c;采样速率越低。 ADC的特性参数 分辨率&#xff1a;表示ADC能辨别的最小模拟量&#xff0c;用二进制位数表示&#xff0c;比如8,10…...

编程日记 2024/5/10 11:19:19

详解AI作画算法原理

在人工智能领域&#xff0c;AI作画技术已经成为一个引人入胜的研究方向。AI作画算法利用机器学习技术&#xff0c;尤其是深度学习&#xff0c;来生成具有艺术性的图像。本文将深入剖析AI作画的基本原理&#xff0c;包括其技术架构、关键组件以及工作流程。 引言 AI作画技术不…...

编程日记 2024/5/10 11:17:17

每日Attention学习3——Cross-level Feature Fusion

模块出处 [link] [code] [PR 23] Cross-level Feature Aggregation Network for Polyp Segmentation 模块名称 Cross-level Feature Fusion (CFF) 模块作用 双级特征融合 模块结构 模块代码 import torch import torch.nn as nnclass BasicConv2d(nn.Module):def __init__(…...

编程日记 2024/5/10 11:13:12

华为eNSP学习—IP编址

IP编址 IP编址子网划分例题展示第一步：机房1的子网划分第二步：机房2的子网划分第三步：机房3的子网划分IP编址 明确：IPv4地址长度32bit，点分十进制的形式 ip地址构成=网络位+主机位 子网掩码区分网络位和主机位 学此篇基础： ①学会十进制与二进制转换 ②学会区分网络位和…...

编程日记 2024/5/10 11:11:08

数据库的要求

本来我是不准备写数据库的。而且是准备从零开始&#xff0c;学习python&#xff0c;学完语言学&#xff0c;会c和写作技法&#xff0c;再来学习数据库 那样做的复杂度是天量的&#xff0c;按部就班什么的具备&#xff0c;因为你完全不清楚什么时候就有这个基础和条件&#xff0…...

编程日记 2024/5/10 11:10:06

Spring MVC(二)

1. 注解RequestMapping修饰类 在Spring MVC中一般都是使用注解RequestMapping来映射请求&#xff0c;也就是通过它来指定控制器可以处理哪些URL请求&#xff0c;相当于Servlet中在web.xml中配置的映射地址作用一致。在上一节的内容中&#xff0c;我们通过注解RequestMapping改进…...

编程日记 2024/5/10 11:09:03

ECP44304T-76是一款增强型通信处理器吗？

ABB ECP44304T-76是一款增强型通信处理器&#xff0c;专为ABB的PLC控制系统设计。 这款通信处理器的主要功能是提供PLC与其他设备或网络之间的通信接口。它支持多种通讯协议&#xff0c;包括但不限于Profibus、Ethernet、Modbus等&#xff0c;使得PLC可以轻松集成到复杂的工业…...

编程日记 2024/5/10 11:08:01

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/12/10 6:16:42

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2025/12/10 3:24:17

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/12/8 7:56:30

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

为什么需要建设工程项目管理？工程项目管理有哪些亮点功能？

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

编程新知 2025/12/9 0:43:27

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

编程新知 2025/12/10 6:23:14

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/10/17 22:08:13

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

编程新知 2025/11/29 10:35:16

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/12/2 17:50:36