玩轉 React（三）- JavaScript代碼裏寫HTML一樣可以很優雅">玩轉 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.”。

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

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

切身體會，屢試不爽，望君受用，謝謝大家。

文章來源：