傲慢纔是阻礙技術提高的最大障礙

無知不是生存的障礙傲慢纔是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，基本避免不了瞬間被關閉的命運。