面试官：jsx和js有什么区别？

面试官：jsx 和 js 有什么区别？

面试官扶了扶黑框眼镜，镜片闪过一道白光：“同学，听说你精通 React，那我考考你 ——JSX 和 JS 有什么区别？”

我摸了摸逐渐后移的发际线，突然想起上周被产品经理逼疯的夜晚。

当时我正用 JS 写 UI，document.createElement('div')，突然产品凑过来：“这个按钮圆角再大 5px，右边加个动态加载动画，对了，颜色要五彩斑斓的黑。”

我深吸一口气，决定掏出珍藏的 “摸鱼宝典”：“面试官，这区别可大了！JS 就像在毛坯房里搭积木，你得先找木板（createElement），再量尺寸（设置属性），最后吭哧吭哧拼起来。要是哪天产品说‘把客厅改成卧室’，你得拆了重来。”

“而 JSX 呢？简直是开发商精装房！” 我拍了下大腿，“<div className="card">，就像在 Word 里排版一样丝滑。要是产品又来作妖，改改标签属性，瞬间焕然一新。这就好比，JS 是用摩斯密码聊天，JSX 是直接发语音！”

面试官嘴角抽搐了一下，在本子上记了几笔：“那……JSX 是如何工作的？”

“这就更有意思了！” 我往前探了探身子，“JSX 表面上是人话，实际上会被 Babel 翻译成 JS 的‘火星文’。

比如<h1>Hello, World!</h1>会变成React.createElement('h1', null, 'Hello, World!')这就像你发了条朋友圈‘今天吃火锅好开心’，微信服务器给翻译成二进制代码，然后再发给你的好友。”

“而且啊，” 我压低声音，“JSX 能在标签里写 JavaScript 表达式，就像在火锅里涮香菜 —— 有些人觉得离谱，有些人觉得真香！你可以写<p>{isLoggedIn? '欢迎回来' : '请登录'}</p>这要是用纯 JS，得写一堆if-else，麻烦得很！”

面试官终于绷不住笑了：“行了行了，下一个问题……”

我默默松了口气，心想：这年头，面试不仅要拼技术，还得会说脱口秀啊！不过话说回来，JSX 确实让前端开发快乐了不少 —— 至少不用再对着一堆appendChild怀疑人生了。