前端典型面試題：為什么 React 選擇使用 JSX ？
嗨，我是你穩(wěn)定輸出、最懂面試的勾勾。
之前在《從理解 React 框架開始，開啟金三銀四面試之旅。》中說過，對 React 框架的理解是我們對日常工作、技術(shù)的探索和總結(jié)。打好了地基，接下來我們用一個具體的面試問題“為什么 React 選擇使用 JSX ？”來幫助你梳理面試的答題思路和技巧，讓你更好地理解這套“通用心法”。
這里問 “為什么 React 選擇使用 JSX ？”，其引申含義是 “為什么不用 A、B、C？”
舉個例子，你二嬸兒給你介紹了倆對象，一個溫婉可愛小鳥依人，一個上得廳堂下得廚房，結(jié)果你依然選擇單身不找對象。你二嬸兒就問你為啥呀？你如果說單身有多好，你一定會被懟。怎么回答呢？溫柔的太粘人，賢惠的長得丑，然后再說單身有多好。
套路就是，之所以選擇 x，是因為 y 和 z 不好，然后接著說明 x 怎么怎么好。
但是，放到技術(shù)上，要答好這個問題“為什么 React 選擇使用 JSX ？”，你需要先了解 React 可選的其他解決方案，然后才能知道有什么不好的地方。
其實相關(guān)方案有很多，最直觀的就是模板。Vue 和 AngularJS 都選擇使用模板方案，而 React 團隊認為引入模板是一種不佳的實現(xiàn)。你覺得模板不好嗎？我覺得還行啊，你覺得丑，我覺得美若天仙啊。這不僅僅是眼光不同，更多的是基于不同的角度來思考，再結(jié)合自身的特性做出的選擇。
React 團隊之所以認為模板不是最佳實現(xiàn)，原因在于，React 團隊認為模板分離了技術(shù)棧，分散了組件內(nèi)的關(guān)注點。其次，模板還會引入更多的概念，類似模板語法、模板指令等。
JSX 并不會引入太多新的概念，它仍然是 JavaScript，就連條件表達式和循環(huán)都仍然是 JavaScript 的方式，更具有可讀性，更貼近 HTML。對于關(guān)注點分離這個問題，我們可以用兩段代碼來展示：
上面的兩段代碼分別使用了 React 及 Vue 的單文件組件來呈現(xiàn)。在 React 中，聲明的 Users 類就是一個組件，全部的方法、數(shù)據(jù)及 UI 視圖，可以以任意的方式呈現(xiàn)。而在 Vue 的組件中，很明確地要將 UI 部分寫入 template 模板標簽中（當然還可以在 component 方法中使用 template 字符串 )，功能及數(shù)據(jù)相關(guān)的要寫入 script 標簽中。而相對應(yīng)的數(shù)據(jù)展示能力，則需要使用模板指令進行呈現(xiàn)，如：@click 指令綁定點擊事件，v-for 循環(huán)遍歷數(shù)據(jù)及樣式結(jié)構(gòu)；而在 JSX 中，全部都是 JavaScript 的，沒什么規(guī)矩可言。
兩種方式各有不同，我自己也說不上喜歡那個，但是，站在混技術(shù)角度，我肯定選擇 JSX ，而站在產(chǎn)品研發(fā)角度，我更傾向于 Vue 的模板方式。
就類似于我媽做飯超級好吃，選媳婦就選小鳥依人的，但是我媽做飯根本沒法吃，我還是選“下得廚房”的媳婦要好一些。畢竟程序員是不需要愛情的……
如果你想解答的更加完善，還可以加入其他方式進行闡述，比如模板字符、JXON。篇幅有限，我這里就不展開說了。
對于“為什么 React 選擇使用 JSX ？”，到這里我們其實已經(jīng)說的差不多了。但是，總覺得少點什么，那就是對于 JSX 本身的闡述還不到位。
那么 JSX 到底是什么呢？
我們知道它不是字符串也不是 HTML，而是一個 JavaScript 的語法擴展，用于描述組件 UI。實際上，官方手冊上早就說的很清楚了，JSX 僅僅只是 `React.createElement(component, props, ...children)` 函數(shù)的語法糖，最終會被編譯為 React.createElement() 函數(shù)調(diào)用，并返回一個被稱為 “React 元素” 的普通 JavaScript 對象。
我們用一段簡單的代碼展示一下，具體來看看：
上面的代碼中，我們直接將 JSX 的內(nèi)容打印到控制臺，效果如下：
那么，從 JSX 到控制臺打印的結(jié)果中，到底發(fā)生了什么？
手冊上說 JSX 僅僅只是 React.createElement() 函數(shù)的語法糖。那么問題來了，React.createElement 到底做了什么呢？ 走，翻一下源碼看看就知道了。
對于這段代碼，并沒有什么高大上的騷操作。在這里，我大致說一下做了什么事情：
React. createElement 二次處理 key、ref、self、 source 四個屬性值；
遍歷 config，篩出可以提進 props 里的屬性；
提取子元素，推入 childArray（也即 props.children）數(shù)組；
格式化 defaultProps；
結(jié)合以上數(shù)據(jù)作為入?yún)?，發(fā)起 ReactElement 調(diào)用；
接著讓我們進入到 ReactElement 方法，繼續(xù)查看到底做了什么事情：
而這些代碼就更有意思了，就是把傳入的內(nèi)容組裝進 element 對象并返回。注意，這個 element 實際就是我們之前打印到控制臺的那個對象。其實這個對象就是我們常說的 “虛擬 DOM”，而從虛擬 DOM 到真實 DOM 的工作，就是我們調(diào)用 ReactDOM.render 方法去做的事情了，這里就不再繼續(xù)分析了。
來波小總結(jié)：
為什么 React 選擇使用 JSX ？
本質(zhì)就是蘿卜青菜各有所愛。React 團隊認為 JSX 不會引入太多新的概念，編碼更純凈，更具有可讀性，更貼近 HTML。而對于 JSX 本身來說，是 React.createElement() 函數(shù)的語法糖，createElement() 對參數(shù)進行拆解后，發(fā)起 ReactElement 調(diào)用生成虛擬 DOM 對象。
推薦閱讀：
點個“在看”和“贊”吧，
畢竟我是要成為前端網(wǎng)紅的人。
<b id="afajh"><abbr id="afajh"></abbr></b>