04｜JSX：如何理解这种声明式语法糖？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
JSX是React中的一种声明式语法糖，为前端开发带来了便利。它提供了类HTML/XML的语法，使得声明代码更直观、易于维护，提高了开发效率。同时，JSX中的JS部分也得到了强调，能够直接利用JS语句，实现条件渲染和循环渲染等功能。文章还对声明式和命令式编程范式进行了对比，强调了React作为声明式的前端技术的特点。此外，还介绍了JSX的基本写法、命名规则、JSX元素类型、JSX子元素类型以及JSX中的JS表达式。总的来说，JSX作为一种语法糖，为React的推广和流行起到了至关重要的作用。文章内容深入浅出，通过对比和举例，使读者更好地理解了JSX的概念和特点。另外，文章还介绍了React组件的发展历程，从最初的`React.createClass`到无状态函数组件，以及函数组件在React Hooks发布后的流行。这些内容帮助读者了解了React组件的演变和背后的原因。文章最后提出了思考题，引发读者对JSX在其他技术和领域的应用进行深入思考。整体而言，本文内容丰富，涵盖了JSX和React组件的重要概念和发展历程，对于前端开发者具有一定的参考价值。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(19)
- 最新
- 精选
Geek_fcdf7b首先，感谢老师对于评论区的每个问题几乎都在回复，从评论中也学到了很多东西。然后，请教一下，V17之后，JSX好像不一定是编译成React.createElement了吧，好像有个react/jsx-runtime作者回复: 你好，Geek_fcdf7b，感谢你的指正。你说得对，React从17开始已经启用全新的JSX运行时来替代React.createElement。对这个变化，我的印象还停留在当时一个预发布版本的可选功能，就疏忽了。 在React 17版本，新JSX运行时的具体更新日志可参考： https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html ； 引入新JSX运行时的动机主要是因为原有的React.createElement是为了类组件设计的，而目前函数组件已然成为主流，老接口限制了进一步的优化，具体可以参考官方的征求意见贴： https://github.com/reactjs/rfcs/pull/107 我在oh-my-kanban项目里验证了一下，确实在开发模式下JSX被编译成了react/jsx-dev-runtime下的jsxDEV，在生产模式下则被编译成了react/jsx-runtime下的jsx或jsxs（目前同jsx）。 var KanbanCard = function KanbanCard(_ref) { var title = _ref.title, status = _ref.status; return /*#__PURE__*/ (0, jsx_runtime.jsxs)("li", { className: "kanban-card", children: [ /*#__PURE__*/ (0, jsx_runtime.jsx)("div", { className: "card-title", children: title, }), /*#__PURE__*/ (0, jsx_runtime.jsx)("div", { className: "card-status", children: status, }), ], }); }; 从编译结果看，与React.createElement在children的处理上是不同，jsx的children直接就是props的一部分。 JSX的语法没有改变，返回值也都是React元素，代码编译器对开发者隐藏了新旧API的差异。从学习理解JSX的角度，影响不大。大家可以先按照目前的文稿来学习，我后续写完新稿后会回来更新文稿。 再次感谢Geek_fcdf7b！
2022-09-03归属地：北京13
coderHOW1. JSX 是函数的语法糖，那 JS 相关框架函数都能实现 JSX 2. 函数的原理就是输入什么会得到一个确定的结果返回，理论上就可以输出成其他需要的结果作者回复: 你好，coder，很棒的答案！正如你提到的，诸如Vue和Solid.js这些JS框架也都加入了JSX特性。
2022-08-31归属地：北京7
null这一节课下来干货好多哇作者回复: 你好，万千观众之一，多谢你的评论，希望你有所收获。当然，如果发现后面课程内容过于干以至于不好消化的话，请务必告诉我，我会尽量调整。
2022-08-30归属地：北京4
心叶讲到jsx，为什么不直接拿出官方文档呢？ https://facebook.github.io/jsx/ 从文档你可以知道： jsx不是react的api，虽然是react团队搞出来的 他的灵感是es4里面的e4x，但原本的e4x因为涉及到语法和语义的定义，实现过于复杂所以被弃用。 jsx的目标是供预处理器使用，将其转换成es作者回复: 你好，心叶，你提到的JSX的官方文档 https://facebook.github.io/jsx/ 确实是最权威的也是最精炼的，不过它是以web规范的格式写作的，初学时读起来可能会有些费力。其他同学在基本掌握JSX后，感兴趣的话也可以回来读一下这篇文档，一定会发现它的妙处。 另外你提到了ES4，真是闻者伤心听者流泪，业界最贴近ES4规范的实现是Adobe Flash中的ActionScript 3语言，随着Flash技术的覆灭，ECMA毅然抛弃了ES4，转而发布了ES5，之后也成为了各浏览器JS标准化的基石。
2022-08-31归属地：北京3
学习前端-react请问：如上我们理解的声明式在编程上便是函数式编程，在jsx上便是 三目运算符 和 Function map，所有在vue的模板里，v-if v-for 是不是不太声明式？作者回复: 你好，Geek_8aba0d，函数式编程是声明式的一种，但声明式还有其他编程范式；JSX是一种声明式，但声明式还有其他模版技术。在前端领域，我们提到声明式时，对应的另一边主要还是命令式。在我看来Vue的v-if、v-for，与Angular里*ngIf、*ngFor，都不能算作是命令式，所以它们也是声明式的。
2022-09-01归属地：北京2
东方奇骥1. JSX 一定得是 React 吗？React 以外的技术能不能使用 JSX？ 答：不一定。JSX 并不是一个新的模板语言，可以认为是一个语法糖。比如Vue也有JSX。 2. JSX 一定得生成 HTML 吗？可以用 JSX 生成其他模版吗？ 答：课程中讲到，本质上来说，JSX可以认为是一个语法糖，最终还是调用React.createElement. 所以理解重写一个createElement也可能生成别的，不一定是HTML。作者回复: 你好，东方奇骥，很棒的答案！你说得对，createElement也可以生成别的，比如React Native中的移动端原生组件。
2022-08-31归属地：北京2- 学习前端-reactJSX 一定得是 React 吗？React 以外的技术能不能使用 JSX？ 不是 这是一个dsl ，其他语言只要实现其底层，便可使用其上层的jsx JSX 一定得生成 HTML 吗？可以用 JSX 生成其他模版吗？ 如上。
作者回复: 你好，Geek_8aba0d，很好的答案。
2022-09-01归属地：北京1 
阿阳最近在vue项目中引入了jsx，在自定义组件的时候，恰好踩到了这节课说的几个坑。帮助很大。 jsx应该不是react独有的，它只是个语法糖，它可以被编译为任意的其他渲染函数。作者回复: 我印象中Vue是从2版本加入了JSX特性，与它原有的template有一定替代关系，需要开发者做一些思路上的转换。不过在底层，正如你提到的，两者都会编译成Vue的渲染函数。
2022-09-01归属地：北京1
杨永安jsx本质是一个返回格式为json的node节点描述信息。可以用在跨端跨平台的用途，比如拿到json作为render蓝本的时候，最后的render会根据宿主环境对应调用相应API。 话说这课没有了吗？编辑回复: 每周二四六更新哈，还在更新中
2022-08-31归属地：北京41
Hello,TomrrowJSX 不是在 React 中发明的，二者的关系更像是相互成就。作者回复: 你好，Hello, Tomrrow，很高兴看到你坚持打卡。你说得对，二者互相成就。
2022-08-30归属地：北京1