(一）React基礎知識
阿新 • • 發佈：2018-12-18
一、 React 基本介紹
- React是一個用於構建使用者介面的JS庫；
- React主要用於構建UI，類比於MVC模式中的V(檢視)；
- React應用程式的核心是元件(Component); 3.1 元件：是一個子包含的模組，它提供一些輸出； 3.2 元件：可將類似按鈕或輸入框作為React元件，元件和元件之間可 以 巢狀組合，或者可以包含輸入一個或多個元件。
二、React工作原理
- React和許多其他前身不同的是，React不是直接在瀏覽器的DOM上執行的，而是在React建立存放元件的虛擬DOM上執行的，為開發者提高了靈活性和效能收益，因此React可提前計算出DOM中需要更新的內容，並對DOM作出相應的更新，從而避免了代價高昂的DOM操作，大幅提高了工作效率。
三、React主要特點
- 宣告式設計：React採用聲明範式，可以輕鬆描述應用
- 高效：React通過對DOM的模擬，最大限度地減少與DOM的互動
- 靈活：React可以與已知的庫或框架很好地配合
- JSX： JSX 是 JavaScript 語法的擴充套件。React 開發不一定使用 JSX ，但我們建議使用它
- 元件： 通過 React 構建元件，使得程式碼更加容易得到複用，能夠很好的應用在大專案的開發中
四、React相關優勢
- 通過React工作原理可知，React的效率極高：主要是合理地利用了本地API達到了跨平臺的效果；
- SEO友好（跨瀏覽器相容）：JavaScript框架的缺陷之一是對搜尋引擎十分不友好，儘管有所改進；React.js在這方面卻做的很出色，你可以在伺服器端執行React.js，虛擬DOM可以像常規的web頁面一樣返回給瀏覽器，不需要任何特殊技巧。
- 注重使用者介面：與MeteorJS、Firebase、AngularJS不同的是，React Native十分重視使用者介面。通過裝置本地環境與React Native的Javascript互動，可以給使用者提供完美的響應式介面；雖然這一定程度上增加了應用的載入時間，但也保證了程式執行過程中的流暢。
- 簡單，使用便捷：安裝ReactJS的官方Chrome外掛，它能使你的除錯過程變得更加簡單。安裝完外掛之後，你就可以像在元素面板中瀏覽一個常規DOM樹一樣直接檢視虛擬DOM
- 元件模組化：編寫獨立的模組化UI元件，若某個或某些元件出現問題時方便進行隔離；每個元件都可進行獨立的開發和測試，且它們可引入其它元件，這等同於提高了程式碼的可維護性；
五、React相關的三個JS庫
- react.js: React的核心庫
- react-dom.js: 提供操作DOM的擴充套件庫
- babel.min.js: 解析JSX語法程式碼轉為純JS語法程式碼的庫
六、簡單React例項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
**總結：**React主要發揮兩個作用：更新DOM和響應事件，其他所有動作都是交予狀態( state )統一管理，將DOM中所有元素的位置資訊集中記錄到頂層元件的state中，以後只需要處理state即可，比如改變位置，重疊方式等等。