玩轉 React（三）- JavaScript代碼裏寫HTML同樣能夠很優雅

這是《玩轉 React》系列的第三篇，看到本篇的標題，瞭解過 React 的同窗可能已經大體猜到我要講什麼了，本篇中要講的內容對於剛接觸 React 的同窗來講，可能有些難以接受，但但願你能堅持學下去，這是 Facebook 的前端大神們爲前端開發作出的革命性創新。

React 第一印象

廢話很少說，先看一段代碼：

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="John" />, mountNode);

這是從 React 官網首頁粘貼過來的一段示例代碼，簡單解釋一下，這段代碼實現了一個名爲 HelloMessage 的組件，它接收一個 name 屬性，能夠在頁面上展現出 Hello xxx。ReactDOM.render 是用來將某個組件渲染到頁面的某個 DOM 節點上。

在以後的文章中，咱們會詳細講解如何建立 React 組件以及如何開發一個完整的 React 項目。如今，我更想跟你們探討的是，你看了上述這段代碼，算是對 React 有了第一印象，心裏是怎樣的感覺？

我相信，不少人第一次看到這樣的代碼時的感覺都是：「我擦，這是什麼玩意兒，HTML怎麼都寫到JavaScript代碼裏去了，展現與業務邏輯分離，這都不懂？」，說實話，這就是我當時真實的心裏感覺。很幸運我堅持了下去，並一直用到如今，如今我對 React 的感覺是：「我擦，好爽，好牛逼」。

剛開始有這種想法很好理解，好多人像我同樣被「展現要與業務邏輯分離」這句話洗腦過久了，其實，這句話真正發揮價值的時候，是在 MVC 開發模式出現以前，那時候 web 程序邏輯很簡單，可能頁面開始處是鏈接數據庫，查詢數據，接在下面就是 HTML 代碼來展現查詢結果了。若是你瞭解一點 PHP，在 PHP 文件的開始處有個 <?php 結尾處可能有個 ?>，這就是那個年代用來分隔 PHP 代碼和 HTML 代碼的。可是隨着 web 程序邏輯愈來愈複雜，業務邏輯代碼跟 HTML 代碼混到一塊兒就變得愈來愈難以維護，因此就有了 MVC 開發模式。

並非說如今「展現要與業務邏輯分離」這句話已經不適用於如今的 web開發，我想說的是，咱們看問題，要回歸問題的本質，咱們要不要接受 React 的這種寫法，判斷依據應該是基於 React 的這種寫法有沒有讓咱們的前端代碼變得更清晰、易維護性更強，而不是 JavaScript 中是否是寫了相似於 HTML 語法的東西，千萬不要爲了分離而分離。

其實只是給JavaScript加了點糖 - JSX

上面這種在 JavaScript 中寫相似 HMTL 代碼的語法被稱爲 JSX。你能夠理解爲擴展版的 JavaScript。顯然，這種語法在瀏覽器環境中是不能執行的，因此在代碼加載到頁面中以前，咱們須要經過工具將它轉譯成標準的 JavaScript 語法，就像咱們如今爲何能夠用 ES6 的語法同樣，儘管目前瀏覽器對它支持得還很差。例以下面這兩段代碼，其實是等價的。

JSX 語法：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

由上面代碼轉譯而來的標準 JavaScript 語法：

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

是否是感受 JSX 語法更直觀，寫起來更簡潔？因此說 JSX 其實是 React.createElement(component, props, ...children) 的語法糖。

若是你熟悉 HTML，那麼 JSX 對於你來講是沒有任何壓力的，由於 HTML 中的全部標籤，在 JSX 中都是支持的，基本上沒有學習成本，只有以下幾點略微的不一樣：

• class 屬性變爲 className
• tabindex 屬性變爲 tabIndex
• for 屬性變爲 htmlFor
• textarea 的值經過須要經過 value 屬性來指定
• style 屬性的值接收一個對象，css 的屬性變爲駝峯寫法，如：backgroundColor。

在上一篇中，咱們有提到組件，實際上，咱們能夠把在 JSX 中寫的 HTML 標籤看做是 React 內部已經實現了的基礎組件。在下一篇中我將詳細爲你們介紹如何利用這些基礎組件來創造一個新的組件，也就是上一篇提到的 React 所提供的建立一個新的 HTML 標籤的能力。

寫在最後

這篇文章的主要目的是但願你們對 JSX 有個基本的印象，我瞭解到有不少同窗就是由於看了一眼 JSX 的語法就放棄繼續看下去了。真的很遺憾……

這裏我還想跟你們分享一個我的經驗，簡單說就是保持謙虛，就像喬布斯說的那樣：「Stay hungry，Stay foolish.」。

當你接觸到一個新的框架、新的技術時，當它與你已有的經驗產生衝突的時候，以爲它設計得垃圾的時候，千萬不要着急吐槽。尤爲是對一些相對還比較流行的框架或技術，更是如此。你要相信，那些框架的設計者的技術能力和工程經驗，遠在你之上，你以爲不爽的地方，你以爲他們就真的沒有考慮到嗎？認真去思考框架設計者在設計這套框架時候的心路歷程，認真去學習別人在這個框架上的最佳實踐，結果每每都會出乎你的意料。

相似的，當你發現框架確實在某方面的能力有所欠缺的時候，不要着急去造輪子，先去社區搜索下，你遇到的問題，可能別人早已經討論了好久，並有了至關不錯的解決方案，就算沒有，這個過程也能給你不少啓發。

切身體會，屢試不爽，望君受用，謝謝你們。