1. React的基本認識

• Facebook開源的一個js庫
• 一個用於構建使用者介面的js庫
• React的核心思想: 通過構建可複用元件來構建使用者介面

1.1 React的特點

• Declarative(宣告式編碼)
• Component-Based(元件化編碼)
• Learn Once, Write Anywhere(支援客戶端與伺服器渲染)
• 高效——高效的DOM Diff演算法, 最小化頁面重繪
• 單向資料流

1.2 使用React

React相關的三個js庫：
- react.js: React的核心庫
- react-dom.js: 提供操作DOM的擴充套件庫
- babel.min.js: 解析JSX語法程式碼轉為純JS語法程式碼的庫

如何使用React

  <script type="text/javascript" src="../js/react.js"></script>
  <script type="text/javascript" src="../js/react-dom.js"></script>
  <script type="text/javascript" src="../js/babel.min.js"></script>
  <div id="example"></div>
  <script type="text/babel"
 
> //必須用babel
ReactDOM.render(<h1>Hello, React!</h1>, document.getElementById('example'));
  </script>

2. React的三大突出特點

2.1 虛擬DOM

2.1.1虛擬DOM簡介

虛擬DOM是一種對於HTML DOM節點的抽象描述，你可以把它看成看成是一種用Javascript實現的結構，它不需要瀏覽器的DOM API支援,所以它在Node.js中也可以使用。它和DOM的一大區別就是它採用了更高效的渲染方式，元件的DOM結構對映到Virtual dom上，當需要重新渲染元件時,React在Virtual dom上實現了一個Diff演算法，通過這個演算法尋找需要變更的節點，再把裡面的修改更新到實際需要修改的DOM節點上，這樣就避免了整個渲染DOM帶來的巨大成本。

2.2.2 如何建立虛擬DOM(元素)

  1). 語法: ReactDOM.render(virtualDOM, containerDOM) :
  2). 作用: 將虛擬DOM元素渲染到真實容器DOM中顯示
  3). 引數說明
    引數一: 純js或jsx建立的虛擬dom物件。
    引數二: 用來包含虛擬DOM元素的真實dom元素物件(一般是一個div)
  4). 建立虛擬DOM的2種方式:
  1️⃣. 純JS(一般不用):
    React.createElement('h1', {id:'myTitle'}, title)
  2️⃣. JSX建立的虛擬dom物件,記得加<script type="text/babel">
    <h1 id='myTitle'>{title}</h1>

2.2 JSX（JS+XML）

1). 全稱: JavaScript XML
2). react定義的一種類似於XML的JS擴充套件語法: XML+JS。 js中直接可以套標籤, 但標籤要套js需要放在{}中
3). 作用: 用來建立react虛擬DOM(元素)物件。可以在解析顯示js陣列時, 會自動遍歷顯示；把資料的陣列轉換為標籤的陣列
注意1: 它不是字串, 也不是HTML/XML標籤
注意2: 它最終產生的就是一個JS物件
4). 標籤名任意: HTML標籤或其它標籤
5). 標籤屬性任意: HTML標籤屬性或其它
6). 基本語法規則
遇到 <開頭的程式碼, 以標籤的語法解析: html同名標籤轉換為html同名元素, 其它標籤需要特別解析（用到元件）
遇到以 { 開頭的程式碼，以JS的語法解析: 標籤中的js程式碼必須用{}包含
7). babel.js的作用
瀏覽器的js引擎是不能直接解析JSX語法程式碼的, 需要babel轉譯為純JS的程式碼才能執行;只要用了JSX，都要加上type=”text/babel”, 宣告需要babel來處理

    例題 1
    <div id="example1"></div>
    <div id="example2"></div>
    <script src="../js/react.js"></script>
    <script src="../js/react-dom.js"></script>
    <script src="../js/babel.min.js"></script>
    <script type="text/babel">
      //初始化動態資料
      var title = 'I Love you!';
      var myName = 'xfzhang';
      //建立虛擬dom : JSX
      var vDOM = <h1 id="myTitle" name={myName}>{title}</h1>;
      //將虛擬dom渲染中頁面元素中
    ReactDOM.render(vDOM, document.getElementById('example1'));
    </script>
    </body>
    </html>

2.3 Component(元件)

React是面向元件程式設計的(元件化編碼開發)，最後得到標籤程式碼
React 的一切都是基於元件的。可以通過定義一個元件，然後在其他的元件中，可以像HTML標籤一樣引用它。說得通俗點，元件其實就是自定義的標籤。

2.3.1 如何建立元件（記得首字母要大寫）

      //方式1: 無狀態函式(最簡潔, 推薦使用)
      function MyComponent1() {
        return <h1>自定義元件標題11111</h1>;
      }
      //方式2: ES6類語法(複雜元件, 推薦使用)react是宣告式編碼
      class MyComponent3 extends React.Component {
        render () {
          return <h1>自定義元件標題33333</h1>;
        }
      }
      //方式3: ES5老語法(不推薦使用了)
      var MyComponent2 = React.createClass({
        render () {
          return <h1>自定義元件標題22222</h1>;
        }
      });
      建立完了後記得渲染元件
ReactDOM.render(<MyComponent1/>,document.getElementById("example1"));

2.3.2 元件注意事項

1). 返回的元件類必須首字母大寫
2). 虛擬DOM元素必須只有一個根元素
3). 虛擬DOM元素必須有結束標籤

2.3.2 ReactDOM.render()渲染元件標籤的基本流程

1). React內部會建立元件例項物件（方式1除外）
2). 得到包含的虛擬DOM並解析為真實DOM
3). 插入到指定的頁面元素內部