https://amatsuzero.github.io/LastStand/tags/jsx/Recent content in JSX on Last StandHugozh-cnThu, 26 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/jsx/Tue, 17 Dec 2024 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/react/jsx/<p>时下虽然接入 <code>JSX</code> 语法的框架越来越多，但与之缘分最深的毫无疑问仍然是 <code>React</code>。</p> <p>2013 年，当 <code>React</code> 带着 <code>JSX</code> 横空出世时，社区曾对 <code>JSX</code> 有过不少的争议，但如今，越来越多的人面对 <code>JSX</code> 都要说上一句“真香”！我们就来一起认识下这个“真香”的 <code>JSX</code>，聊一聊“<code>JSX</code> 代码是如何‘摇身一变’成为 <code>DOM</code> 的”。</p> <p>开始之前请先思考几个问题：</p> <ol> <li><code>JSX</code> 的本质是什么，它和 JS 之间到底是什么关系？</li> <li>为什么要用 <code>JSX</code>？不用会有什么后果？</li> <li><code>JSX</code> 背后的功能模块是什么，这个功能模块都做了哪些事情？</li> </ol> <p>面对以上问题，如果无法形成清晰且系统的思路，那么很可能是把 <code>JSX</code> 想得过于简单了。大多数人只是简单地把它理解为模板语法的一种，但事实上，<code>JSX</code> 作为 <code>React</code> 框架的一大特色，它与 <code>React</code> 本身的运作机制之间存在着千丝万缕的联系，上述 3 个问题的答案，就恰恰隐藏在这层“联系”中。</p> <h2 id="jsx-的本质javascript-的语法扩展">JSX 的本质：JavaScript 的语法扩展</h2> <p>JSX 到底是什么?看看 React 官网给出的一段定义：</p> <blockquote> <p><code>JSX</code> 是 <code>JavaScript</code> 的一种语法扩展，它和模板语言很接近，但是它充分具备 <code>JavaScript</code> 的能力。</p> </blockquote> <p>“语法扩展”这一点在理解上几乎不会产生歧义，不过“它充分具备 <code>JavaScript</code> 的能力”这句，却总让人摸不着头脑，<code>JSX</code> 和 <code>JS</code> 怎么看也不像是“一路人”啊？这就引出了“<code>JSX</code> 语法是如何在 <code>JavaScript</code> 中生效的”这个问题。</p> <h3 id="jsx-语法是如何在-javascript-中生效的认识-babel">JSX 语法是如何在 JavaScript 中生效的：认识 Babel</h3> <p><code>Facebook</code> 公司给 <code>JSX</code> 的定位是 <code>JavaScript</code> 的“扩展”，而非 <code>JavaScript</code> 的“某个版本”，这就直接决定了浏览器并不会像天然支持 <code>JavaScript</code> 一样地支持 <code>JSX</code>。那么，<code>JSX</code> 的语法是如何在 <code>JavaScript</code> 中生效的呢？<code>React</code> 官网其实早已给过我们线索：</p>