React

React（用于建構使用者界面的JavaScript庫）

<code>React</code>是一個将資料渲染為HTML視圖的開源JavaScript庫。

采用元件化開發模式，使用聲明式程式設計，而不是指令式程式設計，提高了開發效率以及元件的複用率。

在<code>React Native</code>中可以使用<code>React</code>進行移動端 <code>Android</code> 和 <code>ios</code> 應用的開發。

使用虛拟DOM+<code>diffing</code>算法，盡量減少與真實DOM的互動。

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

虛拟DOM的本質就是 <code>Object</code>類型的一般對象。

虛拟DOM比較<code>輕</code>，真實DOM比較<code>重</code>，虛拟DOM是React内部使用的DOM。

建立虛拟DOM用 <code>React.createElement( 标簽名，标簽屬性，标簽的内容 )</code> 方法

參數：

标簽名。

标簽屬性。

标簽内容。

渲染虛拟DOM用 <code>React.render( jsx模闆，容器（挂載點），callback() )</code> 方法

jsx模闆。

容器（挂載點）。

callback() 回調函數：當内容放到頁面後觸發的回調函數。

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

JSX

JavaScript

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

定義虛拟DOM時不加雙引号。

樣式的類名指定不要用<code>class</code>，而是用<code>className</code>。

内聯樣式，需要用花括号鍵值表達的形式去寫，在遇到雙單詞的屬性需要使用駝峰命名法。

标簽中混入<code>JS表達式</code>時，需要使用花括号。

隻有一個根标簽。

标簽必須閉合

标簽首字母

若是小寫字母開頭，則将标簽轉為HTML的同名元素，若HTML中無同名元素，則報錯。

若是大寫字母開頭，則将标簽轉化為虛拟DOM元件，React就去渲染對應的元件，若元件未定義，則報錯。

函數式元件

需要注意的地方是： 建立函數式元件時，render函數的第一個參數JSX模闆 不再是變量名，而是加上函數式元件名，因為是react調用了該函數拿到傳回的值，值得注意的是元件首字母需要大寫。 函數式元件内部的this的指向不再是window，而是undefined，這是因為函數式元件的JSX模闆經過Babel的轉換，而Babel内部采用了嚴格模式進行編譯，嚴格模式下不允許函數内部的this指向window。

類式元件

......後續待更新