我转发了一张图到前端群，大周末的群里已经爆炸了

[kuanat]

图片是这个：

https://imgur.com/XiMulEC.jpg

来源是 jordwalke reactjs 作者：

https://x.com/jordwalke/status/1875336115009573268

本意是想调侃一下，没想到对这个事情的认知分歧竟然这么大……

这个问题可能和这两天火热的 Go 话题有点像，要可读性还是要生产力，还是做成年人？

[jackerbauer]

还是 PHP 好

[gefangshuai]

@X_Del #36 那咋办

[lekai63]

@X_Del #36 精辟

[tool2dx]

@iv8d “在 JS 里写 HTML 没人觉得奇怪吗"

不奇怪。自从 js 被发明出来的那一天起，大家都用 js 来拼接 html 。

[hahastudio]

难道不都是 mental illness
三元连用本身就是个问题
第二个还行
第三个 condition 要 escape 的

[wangyzj]

《可读性好》

[DICK23]

不知道有啥好吵的。。。vue 也支持 jsx 啊，svelte 就是模版语法也没任何毛病

[chairuosen]

我写 vue 多，但我支持 jsx ，有时候做复杂的 dom 切换 vue 的模板真不好用。比如不同状态时叶子节点的 dom 可以复用但是 wrapper 节点结构不能复用，jsx 定义一个变量即可，但是 vue 得把叶子节点重复写一遍

[mcfog]

#25 该评论涉及虚假广告 @Livid

[lyxxxh2]

vue 最易读,最简洁的是 react,所以就是说,请选择你的口味: ["简洁","易读"],我选择"简洁"。
像图中 react 这种三元,我也是经常用的。 虽然图中三个分支,我还是站 react 。
2 个分支: 三元
3 个分支: if 和三元都行
4+个分支: 三元不能用了,人脑很难解压出逻辑。


我还喜欢用"短路符代替 if 和 else",当然挺多人不赞同的, 不过在我代码经常使用。
```
if ($model->save()) {
$this->handleOrder()
}

$model->save() && $this->handleOrder();
```

[DefectingCat]

jsx 是有所抛弃的。vue svelte 的模版语法都会有个编译阶段，而 jsx 只有 babel 转了下写法而已。实际上的函数式组件真的是纯粹的函数。

函数传参时写不了表达式，就和在 jsx 中用不了 for 循环一个道理。

babel:
https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.21&spec=false&loose=false&code_lz=MYewdgzgLgBAwiAtgB3AUzLAvDAFAShiwD4YBvAKBhgCc0oBXGsGAHmLNDABMBLKXuBgB-NnwBuxVgHoJpAFxjekmXIC-M4gG4KanUA&debug=false&forceAllTransforms=false&modules=false&shippedProposals=false&evaluate=false&fileSize=true&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-3%2Ctypescript&prettier=false&targets=&version=7.26.4&externalPlugins=&assumptions=%7B%7D

有人说 vue 模版有黑魔法，同理在 vue 中用了 jsx 也就享受不到提前编译带来的优化了。本质上就是个选择题，和选择是用 vue 还是用 react 是一个道理。

争这个不如多看看 js 基础原理

[lawted]

人怎么写，喜欢怎么写不重要，重要的是 AI 最会写哪个

[Torpedo]

不太喜欢模板语法。模板语法的问题在于能力太弱了。表象之一就是你都不知道有多少种模板语法。vue 、php 、Mustache 、jade 等等。这些模板语法第一眼看上去很像，但是遇到逻辑的时候，都会设计自己的一套东西。
面对一些复杂的逻辑，就会遇到很多困难，或者写出来很复杂的代码。

当然这些语法也是有优势的。特别是展示类型的页面。用这种语法可以方便的 ssr ，无论 seo 、首屏性能都有优势。

但是复杂逻辑就不太行了。这也是为什么 jsx 流行的原因。毕竟现在 web 开发的交互越来越复杂。

jsx 好就好在不同的 jsx 区别不太大，构建工具、编辑器支持了一种 jsx 的构建、智能提示就很容易支持多种。不同框架的 jsx 区别主要还是在响应式实现那里。jsx 本身倒是大同小异。

[981130508]

甜豆浆好吃还是咸豆浆好吃？

[dudubaba]

一直写的 jsx ，也不喜欢三元，如果是 if else 这种都是 true && <div></div> 这种并列写，

[gongquanlin]

写 vue 的时候一会儿往上找样式，一会儿跑到下面找 script ，难受的很；

[geekris1]

@hahastudio 说句不好听的 这本身就是黑 jsx 的 jsx 难道就不能写 if else 了吗 非得给 jsx 用嵌套三元 其他写 if else....

[oliveira]

基于 JSX 的灵活性，完全可以使用更加优雅的写法：
function Component(){
if(condition) return <div>Content</div>;
else if(other condition) return <div>OtherContent</div>;
else return <div>Fallback Content</div>
}
或者：
function Component(){
const isFallback = !condition && !!otherCondition;
return(
<>
condition && <div>Content</div>
otherCondition && <div>OtherContent</div>
isFallback && <div>Fallback Content</div>
</>
)
}

[vvtf]

不是前端, 我倒是觉得 jsx 的写法最好了(因为我觉得三元很易读)
1>2>3,
vue 那个完全看不懂,
<div></div>我认为这就已经完成结束了, 后面的任何操作都跟它无关,后面又跟了一个<div></div>我的直觉是会都会渲染.
除非外面再包装一个类似这种.
<v-condition>
<div v-if />
<div v-else-if />
<div v-else>
</v-condition>

[xing7673]

@XCFOX 其实就是越来越客户端 hhhhhhhh