无知不是生存的障碍 傲慢才是
这是刘慈欣老师在小说《三体》中对于地球人面对三体的狂妄态度的评价。
2020 年 12 月 28 日，我在掘金发布了《为什么我推荐适用 JSX 开发 Vue3 的文章》，引起了非常大的热度， 在 29 这一天文章一直前端板块首页的前五位置，到晚上基本锁定了第一的位置。
我并没有想到这篇文章能够这么火，虽然文章确实干货满满，并且非常客观有理有据地进行分析，但毕竟是推荐性质的，并不应该能够这么热。 分析之后才发现，文章热度如此之高的最大原因，更多是因为评论区的火热，截至到我写这篇文章的时候，评论区的回复数量已经到达了130+， 这在掘金的文章中绝对属于异类。
本来我应该对自己的内容能够如此热门感到高兴，但是我却实在地高兴不起来，因为评论区的主观性已经不专业性让我对前端这个行业产生了深深的担忧， 并且在夜晚思绪很久，决定今天对评论区做一次正式的回应。
我写这篇文章的目的不是为了跟那些同学辩论，我叫不醒装睡的人，我希望的是一些真正想要提升自己的同学不要被评论区误导了。
我会对评论区一些具有误导性的评论进行统一回复，并从客观角度让大家学会自己思考，自己去辨别什么是对的以及什么是错的。
在正式开始之前我要声明几点：
- 我只是客观分析 SFC 相对于 JSX 存在的问题，并没有说写 Vue3 一定要用 JSX
- 我的内容都是非常客观的，并且能够举出真实案例进行分析的，而不是主观感受
以及我要简单介绍一下我自己：
- 我创建了BestVue3的网站，我真的很喜欢 Vue3
- 我在写那篇文章之前已经做了三个 Vue3 的开源项目
- @bv3/router 借鉴 React-Router 的路由管理工具
- vue-jss vue3 版本的 css-in-js 方案
- JsonSchemForm 通过 JsonSchema 生成表单的工具
- 我给 Vue3 提过 Bug，给 Vue3 的官方测试库解决过 Bug
- 我写了Vue3 源码解析的网站
我在今年年初就已经在 Vue3 社区活跃了，并且会一直活跃下去。如果希望能够第一时间获取高质量的 Vue3 学习知识或者跟我讨论 Vue3 的问题，可以搜索关注公众号 BestVue3。以上的项目感兴趣的也可以 Star 一波。
那么我们开始，我会列一些比较具有代表性的评论，然后进行回应。
第一类，为什么不直接用 React
那么问题来了，为什么不直接 react
拒绝 vue，直接 react
react 直呼内行
这些评论最大的问题在于
他们直接把 JSX 等价于 React，把 SFC 等价于 Vue。这其实是非常廉价的想法，因为这个看法直接无视了 React 和 Vue 的其他特点，这简直是对这两个优秀框架的侮辱。会写这些评论的人大概率：
- 并不怎么理解 React 的更新模式，以及 Vue 的响应式原理
- 不知道 JSX 和 SFC 编译之后的结果
- 不会自己搭建项目，大概率只会用 CRA 或者 vue-cli 来创建项目
作为开发者，我们不应该以开发工具作为选择一个框架的原因，这要社区想，一个框架可以支持各种开发工具。React 还可以用ClojureScript来写呢。我们要去关注框架的本质，比如：
- 虚拟 DOM 原理
- 他的更新机制
- 响应式原理
- 他支持哪些高级功能，比如
Suspense，Concurrent等
第二类，HTML
个人不喜欢 js 逻辑代码里嵌入 html 标签，觉得膈应
很多人说了，写业务还是模版合适，业务侧重点不是灵活而是结构清晰;我一直觉得 html 夹杂 js 像原始 php。到处<?php 这种嵌套看着就头疼，而 php 框架的方向都是往模版靠的
抱歉打心里拒绝 jsx 讨厌在 js 里写 html
如果你写了很久的 React 和 Vue 你还把 HTML 挂在嘴边，那其实是真的很可悲的。 框架的一大目的就是抹平 DOM，让开发者不需要关注 DOM，他们在极力屏蔽 HTML。
一个经验丰富的开发者在写 JSX 或者 template 的时候，眼里面根本不应该有 HTML，他们看到的就是h('div', {id: 'xxx'}, 'Hello World')，这样的虚拟 DOM 创建过程。
我记得有个同学说**我为什么要关注编译之后的结果？**我一时间被问蒙了。 后来我想了很久，我想对看这篇文章的同学说，你如果想提升自己，就应该往底层研究，何况编译结果这根本就不算底层，编译过程才勉强算。 对于不想提升自己的同学来说我确实完全无法反驳他。
所以不要再说什么 JSX 是在 JS 里面写 HTML 了，你去面试的时候如果这么说，面试官会直接认为你根本不理解框架的原理。
第三类，性能优化
追求性能 jsx 可能不是一个好选择，但是 jsx 的灵活性个人感觉 template 确实没办法达到
vue3 中针对 template 的一系列编译时优化不要了吗
你们都用 jsx，尤大的 compiler 就白写了，一大堆模板优化就白做了，还不如去用 react
能提出这个质疑的同学以及属于比较优秀的了，因为他们知道 template 在编译过程中有进行一些性能优化，说明有认真研究过原理。
对于这点我们要理清一个原则：JSX 也是需要编译的，和 template 一样，他们都会经过语法分析的阶段，所以理论上 Vue3 的 template 做的优化 JSX 都可以做到。
事实上，现在的 babel-jsx 插件也有了优化的能力，通过开启optimize配置项目，就可以进行 patchFlag 等的性能优化编译。
{
"plugins": [["@vue/babel-plugin-jsx", {optimize: true}]]
}
然而作者还写了一句注释：
It's not recommended to enable it If you are not familiar with Vue 3.
如果你对 Vue3 不是很熟悉，建议不要开启
事实上 Vue3 的性能优化也是存在一些问题的，我前几天就遇到了了个，提了issue，官方也不确定是否能解决。
这个问题如果你对于 Vue3 的更新机制以及其源码不了解，你遇到的时候肯定一头雾水。
所以不要盲目迷信优化。
第四类，css
jsx 下有没有类似 vue scoped css 的用法，用过 styled-jsx 感觉差点意思
sfc 最大的优点我觉得是 scoped style，比 styledscomponents 和 cssmodule 好用太多了
SFC 的 scoped css 确实是一个非常方便的功能，能够让我们针对一个组件写其 CSS，并且非常明显地把他们放到一个文件内来约束其使用范围。
我们可以用 css-modules 在 JSX 进行替代，但是毫无疑问这需要多一步import classes from 'xxx.css'这个步骤，以及你在写 class 的时候需要写classes.xxx。
另外我们也可以使用在 React 中非常常见的 css in js 方案（大概因为 SFC 太流行，所以在 Vue 生态中目前没有什么好的实现）。
但是以上的替代方案确实没有办法做到比 scoped css 简单易用。所以如果 scoped css 对你很重要，那么你确实可以考虑因为这个因素而选择 SFC。
这是一个选择因素，对于不同的团队其重要程度不一，我就不发表我的个人观点了，这个大家仁者见仁吧。
总结
先回应这些问题，后续有新的我会再更新。
我非常欢迎大家来评论区跟我交流，但是仅限于有客观事实的交流，一些主观的使用体验：
- 我就是不喜欢在 js 里面写 html
- SFC 就是简单，比 JSX 容易理解（我并不赞同简单论）
- vue 就应该用 SFC
这些没营养的观点我之后都会直接无视，昨天确实是因为太久没发文章，看到一些评论没忍住怼了几句，如果有不太好的发言，还请各位谅解。
如果你觉得我的观点不正确，你可以发表你的观点，并且列出一些客观事实来说明我哪里说得不对，我们可以深入交流一番，大家一起成长。
就像在 github 提 issue 一样，一般都会要求你给出一个最小化的 demo，你的期望输出，实际的输出，以及大概的原因。那些说“我觉得这个库的函数运行结果应该咋咋咋”的 issue，基本避免不了瞬间被关闭的命运。
