傲慢才是阻碍技术提高的最大障碍

无知不是生存的障碍傲慢才是php

这是刘慈欣老师在小说《三体》中对于地球人面对三体的狂妄态度的评价。css

2020 年 12 月 28 日，我在掘金发布了《为何我推荐适用 JSX 开发 Vue3 的文章》，引发了很是大的热度，在 29 这一天文章一直前端板块首页的前五位置，到晚上基本锁定了第一的位置。html

我并无想到这篇文章可以这么火，虽然文章确实干货满满，而且很是客观有理有据地进行分析，但毕竟是推荐性质的，并不该该可以这么热。分析以后才发现，文章热度如此之高的最大缘由，更可能是由于评论区的火热，截至到我写这篇文章的时候，评论区的回复数量已经到达了130+，这在掘金的文章中绝对属于异类。前端

原本我应该对本身的内容可以如此热门感到高兴，可是我却实在地高兴不起来，由于评论区的主观性已经不专业性让我对前端这个行业产生了深深的担心，而且在夜晚思绪好久，决定今天对评论区作一次正式的回应。vue

我写这篇文章的目的不是为了跟那些同窗辩论，我叫不醒装睡的人，我但愿的是一些真正想要提高本身的同窗不要被评论区误导了。react

我会对评论区一些具备误导性的评论进行统一回复，并从客观角度让你们学会本身思考，本身去辨别什么是对的以及什么是错的。git

在正式开始以前我要声明几点：github

我只是客观分析 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 一波。vue-cli

那么咱们开始，我会列一些比较具备表明性的评论，而后进行回应。

第一类，为何不直接用 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，基本避免不了瞬间被关闭的命运。