歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~
本文由鵝廠新鮮事兒發表於雲+社區專欄
作者：盧文喆 騰訊雲 UI工程師
導語 | 當React 剛開始紅的時候，一直覺得 JSX 的設計思想極其獨特，屬於革命性的創新，它性能出衆，代碼邏輯卻非常簡單，所以，受到很多開發者的關注和使用，認爲它可能是將來 Web 開發的主流工具。
React 最早起源於 Facebook 的一個內部項目，因爲公司對現有的 JavaScript MVC 框架都不滿意，就決定自己開發一套，用來架設 Instagram 的網站。開發完成後，發現這套東西很好用，就在2013年5月開源了。
那麼 React 優勢在哪裏呢？
首先：虛擬 DOM，在 DOM 樹的狀態需要發生變化時，虛擬 DOM 機制會將同一Event loop前後的 DOM樹進行對比，如果兩個 DOM 樹存在不一樣的地方，那麼 React 僅僅會針對這些不一樣的區域來進行響應的 DOM 修改，從而實現最高效的 DOM 操作和渲染。
比如，我們修改了 DOM 樹上一些節點或 UI 組件對應綁定的 state，React 會即刻將其標記爲“髒狀態”，在一個 Event loop 結束時，React 會計算得出 DOM 樹上需要修改的地方及其最終的狀態，並僅僅針對這些地方進行一次性的重新渲染。
於是好處顯而易見，並非每修改一次組件的 state，就會重新渲染一次，而是在 Event loop 結束後做一次計算，減少冗餘的 DOM 操作。另外 React 只針對需要修改的地方來做新的渲染，而非重新渲染整個 DOM 樹，自然效率很高。
其次：組件可嵌套，而且，可以模版化 —— 其實在 React 裏提及的“組件”，常規是一些可封裝起來、複用的 UI 模塊，可以理解爲“帶有細粒度UI功能的部分DOM區域”。然後我們可以把這些組件層層嵌套起來使用，當然這樣組件間會存在依賴關係。
至於模塊化，類似於 ejs 那樣可以作爲獨立的模塊被引用到頁面上來複用，它可以直接把 UI 組件當作腳本模塊那樣來使用，完全可以配合 CommonJS、AMD、CMD 等規範來 require 需要的組件模塊，並處理好它們的依賴關係。
基於上述的兩點，React 很自然的就獲得一部分開發者的青睞。不過在這之前得先理清兩件事情：
1. React 是一個純 View 層，不擅長於和動態數據打交道，因此它不同於，也替代不了常規的框架；
2. React 很擅長於處理組件化的頁面，在頁面上搭組件的形式有點像搭積木一樣，因此用上React的項目需求常規爲界面組件化。
簡單點說，React組件應該具有如下特徵：
（1）可組合（Composeable）：一個組件易於和其它組件一起使用，或者嵌套在另一個組件內部。如果一個組件內部創建了另一個組件，那麼說父組件擁有它創建的子組件，通過這個特性，一個複雜的UI可以拆分成多個簡單的 UI 組件；
（2）可重用（Reusable）：每個組件都是具有獨立功能的，它可以被使用在多個UI場景；
（3）可維護（Maintainable）：每個小的組件僅僅包含自身的邏輯，更容易被理解和維護；
組件化一直是網頁開發的利器，許多開發者最希望能夠最大程度的重複使用過去的開發的組件，避免重複造輪子。在 React 中組件就是一切，前端開發可能需要花點時間轉變思維，尤其過去我們往往習慣將 HTML 、CSS 和 JavaScript 分離，現在卻要把它們都封裝在一起。
以下是一般 React Component 書寫的主要兩種方式：
1.使用 ES6 的 Class
// 注意組件首字母需要大寫
class MyComponent extends React.Component {
// render 是 Class based 元件唯一必須的方法（method）
render() {
return (
<div>Hello, World!</div>
);
}
}
// 將 <MyComponent /> 組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));2.使用 Functional Component 寫法
// 使用 arrow function 來設計 Functional Component 讓 UI 設計更便捷，避免互相干擾（side effect）
const MyComponent = () => (
<div>Hello, World!</div>
);
// 將 <MyComponent /> 組件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));前面說到 React 有獨有的 JSX 語法，那麼到底什麼是 JSX 呢？
JSX在ECMAScript的基礎上提供了類似於XML的擴展。 JSX和HTML有點像，但也有不一樣的地方。例如，HTML中的class屬性在JSX中 爲className。其他不一樣的地方，你可以參考FB的HTML Tags vs. React Components 這篇文章。
但是由於瀏覽器原生並不支持JSX，因此我們需要將其編譯爲JS，有很多方法能夠 完成這個任務，後面我們會提到這些方法。此外，Babel也能夠講JSX編譯爲JS。
一些參考資料：
一般而言 JSX 通常有兩種使用方式：
1.使用 browserify 或 webpack 等 CommonJS bundler 並整合 babel 預處理
2.在瀏覽器端做解析
請大家注意JSX的語法書寫方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 請先載入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
// 代碼寫在這裏！
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>一般載入 JSX 方式有：
內嵌
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>從外部引入
<script type="text/jsx" src="main.jsx"></script>
總結：以上都是我對 React 簡單的瞭解，包括 React 的優勢、組件化的特徵、React Component 的方法、以及 React 中爲何要使用 JSX，以及 JSX 基本概念和用法。在 React 裏，所有的事物都是以 Component 爲基礎，通常會將同一個 Component 相關的資源放在一起，而在撰寫 React Component 時我們常會使用 JSX 的方式來提升書寫效率。 JSX 是一種語法類似 XML 的 ECMAScript 語法擴充，可以發揮 JavaScript 的強大能力，放棄蹩腳的模板語言。當然 JSX 並非強制使用，你也可以選擇不用，因爲最終 JSX 的內容都會轉化成 JavaScript。
以上就是對 React 入門的部分理解。
問答
如何擴展React.js組件？
相關閱讀
AI從入門到放棄：CNN的導火索，用MLP做圖像分類識別？
開發效率太低?您可能沒看這篇文章
微信車票背後的設計故事
【每日課程推薦】機器學習實戰！快速入門在線廣告業務及CTR相應知識
此文已由作者授權騰訊雲+社區發佈，更多原文請點擊
搜索關注公衆號「雲加社區」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社區！