为什么React要使用jsx

又双叒叕778

已于 2025-02-08 14:01:06 修改

阅读量431

点赞数 5

文章标签： react.js 前端前端框架

于 2025-02-08 11:28:25 首次发布

本文链接：https://blog.youkuaiyun.com/qq_63943166/article/details/145508798

版权

什么是jsx

Jsx 是 Js 的语法扩展，用类 XML 语法直接在 Js 中编写 UI

为什么React要使用jsx，其他的不行吗

在学习React jsx 的时候，可能会有疑问，为什么 React 推荐使用jsx，其他的不行吗 , 一定要用jsx吗，我就不想用 jsx 怎么办，带着问题一一解答。

1. 在React中必须使用jsx吗

官方文档：
JSX and React 是相互独立的东西。但它们经常一起使用，但你可以单独使用它们中的任意一个，JSX 是一种语法扩展，而React 则是一个 JavaScript 的库。

所以在React中并不是必须使用jsx，因为jsx并不能直接被浏览器识别，还需要通过babel插件编译为 React.createElement() 函数的调用，所以我们还可以直接使用 React.createElement() 来书写React代码。

2. 为什么不使用 React.createElement()

JSX 代码

const element = (
  <div id="myDiv" className="container">
    <h1>Hello, React!</h1>
    <p>This is a paragraph.</p>
  </div>
);

const element = React.createElement(
  "div",
  { id: "myDiv", className: "container" },
  React.createElement("h1", null, "Hello, React!"),
  React.createElement("p", null, "This is a paragraph.")
);

对比下来jsx 书写的代码更简洁，可读性更强，结构层次更清晰。
所以说jsx 是使用 XML 语法编写 JavaScript 的一种语法糖，为了方便阅读和维护，React 更推荐使用 jsx语法糖而不是原生写法。

为什么不使用模板

在这里插入图片描述

在Vue中，使用模板书写，网页内容放在 template 中，逻辑放在 JavaScript 中，而样式放在 style中，模板分离了技术栈，分散了组件内的关注点。其次，模板还会引入更多的概念，类似模板语法、模板指令等。
在React中，使用jsx书写，所有的内容都被包含在声明的User类中，而Jsx 并不会引入太多新的概念，它仍然是 JavaScript，可以直接在 jsx 中书写 Js 表达式，与 Js无缝集成吗，还支持 TypeScript，可以在编译时进行类型检查，减少运行时错误。
其实在对比 Vue2 和 Vue3 的写法，我们发现 Vue3 的组合式API的相比于 Vue2 的选项式API ，将分散的代码逻辑进行组织，整合在一起，也是对关注点分离的进一步优化。