簡介

React.js 是一個幫助你構建頁面 UI 的庫。如果你熟悉 MVC 概念的話，那麼 React 的元件就相當於 MVC 裡面的 View。說白點就是幫助我們將介面分成各個獨立的小塊，每一個塊就是元件，這些元件之間可以組合、巢狀，就成了我們的頁面。

一個元件的顯示形態和行為有可能是由某些資料決定的。而資料是可能發生改變的，這時候元件的顯示形態就會發生相應的改變。而 React.js 也提供了一種非常高效的方式幫助我們做到了資料和元件顯示形態之間的同步。

React.js 不是一個框架，它只是一個庫。它只提供 UI （view）層面的解決方案。在實際的專案當中，它並不能解決我們所有的問題，需要結合其它的庫，例如 Redux、React-router 等來協助提供完整的解決方法。

JSX

React的核心機制就是實現了一個虛擬DOM，利用虛擬DOM來減少對實際DOM的操作從而提升效能，元件DOM結構就是對映到這個虛擬的DOM上，React在這個虛擬DOM上實現了一個diff演算法，當要更新元件的時候，會通過diff尋找要變更的DOM節點，再把這個修改更新到瀏覽器實際的DOM節點上，所以實際上不是真的渲染整個DOM樹，這個虛擬的DOM是一個純粹的JS資料結構，所以效能比原生DOM會提高很多；

虛擬DOM(virtual-dom)實際上是對實際DOM的一個抽象，是一個js物件。react所有的表層操作實際上是在操作虛擬DOM。經過diff演算法計算出虛擬DOM的差異，然後將這些差異進行實際的DOM操作更新頁面

從 JSX 到頁面經歷的過程：

• JSX 是 JavaScript 語言的一種語法擴充套件，長得像 HTML，但並不是 HTML。
• React.js 可以用 JSX 來描述你的元件長什麼樣的。
• JSX 在編譯的時候會變成相應的 JavaScript 物件描述。
• react-dom 負責把這個用來描述 UI 資訊的 JavaScript 物件變成 DOM 元素，並且渲染到頁面上。