React（用於構建使用者介面的JavaScript庫）

React是一個將資料渲染為HTML檢視的開源JavaScript庫。

React 的特點：

1. 採用元件化開發模式，使用宣告式程式設計，而不是命令式程式設計，提高了開發效率以及元件的複用率。
2. 在React Native中可以使用React進行移動端 Android 和 ios 應用的開發。
3. 使用虛擬DOM+diffing演算法，儘量減少與真實DOM的互動。

與Vue相比的區別：

兩者都是做元件化的，整體的功能都類似，但是它們的設計思路是有很多的不同的，使用React和Vue主要是理解它們設計思路的不同。

起步：

<!-- 引入react核心庫 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<!-- 引入react-dom用於支援react操作dom -->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel，用於JSX轉換成js -->
<!-- 在書寫JSX語法時，Babel的作用體現的格外重要，因為瀏覽器無法識別JSX的語法程式碼，所以需要通過Babel進行轉換成瀏覽器可識別的JS -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<!-- 在使用JSX方式建立虛擬DOM時，必須加上type="text/babel" -->
<script type="text/babel"></script> 
 

虛擬DOM

• 虛擬DOM的本質就是 Object 型別的一般物件。

• 虛擬DOM比較輕，真實DOM比較重，虛擬DOM是React內部使用的DOM。

• 建立虛擬DOM用 React.createElement( 標籤名，標籤屬性，標籤的內容 ) 方法

  • 引數：
  • 標籤名。
  • 標籤屬性。
  • 標籤內容。

• 渲染虛擬DOM用 React.render( jsx模板，容器（掛載點），callback() ) 方法

  • 引數：
  • jsx模板。
  • 容器（掛載點）。
  • callback() 回撥函式：當內容放到頁面後觸發的回撥函式。

JSX（JavaScript + XML）

XML是早期時一種用於儲存和傳輸資料的檔案格式 如今被JSON

代替

<student>
    <name>Tom</name>
    <age>19</age>
</student>

"{
	"name": "tom",
	"age": "18"
}"

建立虛擬DOM的兩種方式

1. JSX

   // const VDOM = <h1>hello react</h1>
   // 在h1標籤裡面巢狀span標籤
   
   const VDOM = (
     <h1 id="title">
     <span class="dom">hello react</span>
     </h1>
   )
   ReactDOM.render(VDOM, document.getElementById('app'))
   
   // -----------分割線----------------
   
   // babel將JSX語法轉換成瀏覽器可識別的JS
   const VDOM = (
     <h1 id="title">
     <span class="dom">hello react</span>
     </h1>
   )
   // 等價於
   const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world'))
    
   

2. JavaScript

   採用JavaScript方式建立虛擬DOM時不需要用到Babel轉換，因為未使用到JSX語法。

   // JavaScript的方式
   
   // const VDOM = React.createElement('h1', {id : 'title'}, 'hello world')
   // 在h1標籤裡面巢狀span標籤
   const VDOM = React.createElement('h1', { id: 'title' }, React.createElement('span', { className : 'dom' }, 'hello world'))
   
   ReactDOM.render(VDOM, document.getElementById('app'))
   

JSX語法規則

1. 定義虛擬DOM時不加雙引號。
2. 樣式的類名指定不要用class，而是用className。
3. 內聯樣式，需要用花括號鍵值表達的形式去寫，在遇到雙單詞的屬性需要使用駝峰命名法。
4. 標籤中混入JS表示式時，需要使用花括號。
5. 只有一個根標籤。
6. 標籤必須閉合
7. 標籤首字母
   1. 若是小寫字母開頭，則將標籤轉為HTML的同名元素，若HTML中無同名元素，則報錯。
   2. 若是大寫字母開頭，則將標籤轉化為虛擬DOM元件，React就去渲染對應的元件，若元件未定義，則報錯。

.wrap {
  background-color: orange;
}
#title {
  color: #fff;
}

const myId = 'title'
const myClass = 'wrap'
const VDOM = ( // 定義虛擬DOM時不加雙引號。
  // 樣式的類名指定不要用class，而是用className
  <div className={myClass}> // 標籤中混入JS表示式時，需要使用花括號。
    <h1 id={myId}>
      // 內聯樣式，需要用花括號鍵值表達的形式去寫，在遇到雙單詞的屬性需要使用駝峰命名法。
      <span style={{ color: 'red', fontSize: '39px'}}>hello react</span>
    </h1>
    <h1 id={myId}>
      <span>hello react</span>
    </h1>
  </div>
  // 只有一個根標籤。
)
ReactDOM.render(VDOM, document.getElementById('app'))

React面向元件程式設計

• 函式式元件

  需要注意的地方是：

  • 建立函式式元件時，render函式的第一個引數JSX模板 不再是變數名，而是加上函式式元件名，因為是react呼叫了該函式拿到返回的值，值得注意的是元件首字母需要大寫。
  • 函式式元件內部的this的指向不再是window，而是undefined，這是因為函式式元件的JSX模板經過Babel的轉換，而Babel內部採用了嚴格模式進行編譯，嚴格模式下不允許函式內部的this指向window。

  const arr = ['angular', 'react', 'vue']
  const myClass = 'title'
  // 建立函式式元件
  function VDOM() {
    console.log(this)
    return (
      <div className={myClass}>
        <h1>大家好，我是函式式元件</h1>
      </div>
    )
  }
  // 把元件渲染到頁面上
  ReactDOM.render(<VDOM />, document.getElementById('app'))
  

• 類式元件