Vue.js 的 JSX 中的 class attribute 为什么用 class,而不像 React 那样用 className

2021-01-27 08:29:07 +08:00
 Cbdy

React 给出的解释是 class 是 JavaScript 的保留字

2457 次点击
所在节点    问与答
18 条回复
kyuuseiryuu
2021-01-27 08:39:45 +08:00
因为 react 是 HTML in js,本质上还是 js 。

vue 是 HTML 标签的拓展。
hackyuan
2021-01-27 09:13:35 +08:00
这个你都自问自答了,`class 是 Javascript 的保留字`。
而 HTML 中只是标签上的一个属性而已。
David1119
2021-01-27 09:29:31 +08:00
难道不应该反过来问吗?怎么反而成了 vue 不对了。。。。
anguiao
2021-01-27 09:30:49 +08:00
反正都得经过 Babel 转译嘛,我觉得没差。
hjdtl
2021-01-27 09:34:09 +08:00
一楼正确,此贴终结
murmur
2021-01-27 09:36:38 +08:00
因为在 html 里就是 class 啊,react 才是为了偷懒啥封装都不做
mebtte
2021-01-27 10:00:04 +08:00
别问, 问就是新的语法 新的体验
shintendo
2021-01-27 10:02:32 +08:00
正确的问法:为什么 React 要用 className 而不是跟 HTML 一样用 class,明明 vue 的 JSX 证明了保留字不是问题
molvqingtai
2021-01-27 10:23:22 +08:00
楼上正解,因为 React 团队偷懒
yaphets666
2021-01-27 10:46:56 +08:00
vue 的思路是尽量保证和原始 HTML,JS,CSS 一致.
template 里头的东西称作为模板,会经过 vue-loader 的处理.写什么都可以.
class 和原生一样,并且意义是一致的,就是添加类名,当然选择 class 更符合直觉.
这就是 vue 更加简单,容易学习的原因.尽量做的和原生一样.
soulmt
2021-01-27 11:05:09 +08:00
这事又没有标准答案,都是开发者基于自己的逻辑来约定的而已, 不用太过于纠结。
robinlovemaggie
2021-01-27 12:24:43 +08:00
说到这个就要刨根究底 React 和 Vue 本质上不同之处了:
1.React 是个库(library), 而 Vue 是个框架(Framework)
2.状态变更(Data Mutation)不同,React 是被动式(setState)给用户自主权,Vue 是主动 re-rendering,用户无法控制渲染时机。
seki
2021-01-27 12:32:02 +08:00
className 是早期时候 API 设计的决定,现在来看其实本来用 class 也是没有问题的。react 开发团队也有过更改设计的想法,虽然目前没有什么新消息。采用类 react API 的 preact 就是用的 class

这种事情没有必要拔得太高……
Biwood
2021-01-27 13:15:07 +08:00
先搞清楚一个概念,Vue 里面那个不是 JSX,是 template,用的是 HTML 语法。
React 里面那个才叫 JSX,用的是 JavaScript 语法。
html 语法里面用 class,JS 语法里面用 className,很正常。
shintendo
2021-01-27 13:23:10 +08:00
@Biwood 先搞清楚一个概念,Vue 支持 JSX
Biwood
2021-01-27 15:22:30 +08:00
@shintendo #15
Vue 里面所谓的 JSX 只能算是 template 的语法糖,这跟 React 里面一切皆用 JS 写的理念不一样。
硬要刨根问底,我觉得本质上就是 template 语法跟 JavaScript 语法的区别,毕竟 Vue 的 template 模式继承自 Angular,而 React 不是。
shintendo
2021-01-27 21:09:23 +08:00
@Biwood template 是 render funtion 的语法糖,JSX 也是 render function 的语法糖,这一点和 React 的 JSX 并没有本质区别
assclb
2021-01-28 13:24:01 +08:00
@Biwood #17 讲的没错,vue 里面不管是 jsx 还是 template 都是 render function 的语法糖...

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/748744

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX