React學習（一）三大突出特點

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). 插入到指定的頁面元素內部