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

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

news 2026/3/27 23:15:09

面试题：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

【手把手】FFmpeg音视频开发从入门到实战：一文吃透音视频同步原理与代码实现（附完整源码）

文章目录第一章 基础必懂&#xff1a;音视频开发的核心概念与FFmpeg框架1.1 别再被封装格式忽悠&#xff1a;MP4、MKV、AVI到底差在哪&#xff1f;1.2 搞懂解码流程&#xff1a;FFmpeg处理音视频的4个核心结构体第二章 深入原理&#xff1a;音视频同步的核心机制2.1 播放器卡顿…...

编程新知 2026/3/27 22:08:04

DIY电源改造必备：TL594与SG3524 PWM控制器实战对比（附电路图）

DIY电源改造实战&#xff1a;TL594与SG3524 PWM控制器深度对比与电路设计指南 1. 从零认识PWM控制器的核心价值 在电子爱好者的工作台上&#xff0c;电源改造项目总是充满魅力与挑战。无论是将旧电脑电源改造成可调实验室电源&#xff0c;还是为自制音响系统设计高效供电模块&a…...

编程新知 2026/3/27 21:45:58

大厂速报：小红书期权涨麻，字节年终暴击，AI赛道卷疯了

互联网圈没有岁月静好&#xff0c;只有暗潮涌动——大厂裁员传闻从未断档&#xff0c;AI内卷卷到凌晨三点&#xff0c;打工人一边焦虑KPI&#xff0c;一边蹲守大厂福利&#xff0c;有人靠期权实现财富跃迁&#xff0c;有人被组织调整撞个正着。一、核心福利&#xff5c;打工人狂…...

编程新知 2026/3/27 21:15:47

Java AI开发避坑！

文章目录一、当"龙虾"突然发狂二、解剖这场"史诗级翻车"第一刀&#xff1a;插件生态大迁徙第二刀&#xff1a;API 接口一锅端第三刀&#xff1a;安全沙箱锁死第四刀&#xff1a;目录结构洗牌三、Java 开发者的至暗时刻WebSocket 连接闪断MCP 适配器失效技能…...

编程新知 2026/3/27 20:53:39

[深度解析] AXI4-Stream Register Slice：时序优化的“外科手术刀”

1. 为什么需要AXI4-Stream Register Slice&#xff1f; 在FPGA设计中&#xff0c;时序问题就像血管中的血栓&#xff0c;随时可能让整个系统瘫痪。想象你正在设计一个4K视频处理流水线&#xff0c;每个像素都要经过十几级处理模块。当系统时钟频率提升到300MHz以上时&#xff0…...

编程新知 2026/3/27 20:47:38

SQLancer：自动化数据库测试的效能革命

SQLancer&#xff1a;自动化数据库测试的效能革命 【免费下载链接】sqlancer Automated testing to find logic and performance bugs in database systems 项目地址: https://gitcode.com/gh_mirrors/sq/sqlancer 在数据库系统的开发与维护中&#xff0c;逻辑缺陷和性能…...

编程新知 2026/3/27 19:16:51

SDMatte镜像结构详解：/opt/sdmatte-web目录布局与模型路径规范说明

SDMatte镜像结构详解&#xff1a;/opt/sdmatte-web目录布局与模型路径规范说明 1. 镜像概述 SDMatte 是一款面向高质量图像抠图场景的AI模型&#xff0c;特别适合处理以下任务&#xff1a; 商品图主体分离透明物体提取&#xff08;如玻璃器皿、薄纱等&#xff09;复杂边缘精…...

编程新知 2026/3/27 19:02:49

高基数路由器的最佳拍档？深入浅出解析Flattened Butterfly拓扑的优缺点与适用场景

高基数路由器的最佳拍档&#xff1f;深入浅出解析Flattened Butterfly拓扑的优缺点与适用场景 在构建大规模互连网络时&#xff0c;拓扑结构的选择往往决定了系统的性能上限和成本下限。当工程师面对高基数路由器&#xff08;High-Radix Router&#xff09;的选型时&#xff0c…...

编程新知 2026/3/27 18:58:48

告别格式转换烦恼！Marker让文档转换效率提升5倍

告别格式转换烦恼&#xff01;Marker让文档转换效率提升5倍 【免费下载链接】marker 一个高效、准确的工具&#xff0c;能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式&#xff0c;支持多语言和复杂布局处理&#xff0c;可选集成 LLM 提升精度&#xff0c;适用于学术…...

编程新知 2026/3/27 18:42:37

Wireshark抓包实战：DHCP协议交互全流程解析（附常见问题排查）

Wireshark深度解析&#xff1a;DHCP协议交互全流程与实战排错指南 从零开始理解DHCP协议的本质 想象一下&#xff0c;当你带着笔记本电脑走进一家咖啡馆&#xff0c;连接Wi-Fi的瞬间&#xff0c;设备就自动获得了上网所需的所有配置——IP地址、子网掩码、默认网关、DNS服务器。…...

编程新知 2026/3/27 17:41:59