react學習之認識react

認識react和Vue.js的區別

vue和react沒有本質的區別：

• vue更注重視圖的自動同步，使用習慣偏向於前端人員
• react更注重組件及其狀態的管理，使用習慣偏向於程序員
  

相對於vue，React更加透明，沒有更多的隱含邏輯（好比vue的指令就是一種隱含邏輯），更便於程序員理解程序的執行過程；固然，也更復雜強大

react生態圈

• JSX：擴展JS自身的語法，是React的基礎
• Flux：React的數據流組件
• Redux：比Flux更加簡單，易用
• React-Narive：用react編寫原生移動應用（專門用來編寫移動端，寫出來的是原生）
• Reavt-Server：服務器端渲染React組件（1.利於seo；2.有些邏輯是須要隱藏的）

JSX

jsx是一門獨立的語言，但願能改進js的不少問題，可是ES6出現後，包含了JSX的大部分特性，因此不多獨立使用

• babel能夠編譯JSX
• react是基於JSX的語法

JSX的主要特點

提供模板式建立元素的方法

關於虛擬DOM

直接操做DOM元素很是緩慢（資源開銷是普通數據操做的數千倍），因此不少框架（Vue，React）都具有虛擬DOM特性，咱們直接操做的是虛擬DOM，而非真實節點，React會在適合的時機批量更新DOM節點（通常是主進程空閒時），從而提升性能

可否單獨使用JSX？

不能，React強依賴JSX（browser）用於解析JSX語法，但JSX也強依賴React用於解析模板語法

第一個React程序

• browser.js: babel,用於編譯JSX
• react.js ：react核心庫
• react-dom.js：用於渲染組件

       必須先引入react.js ，而後引入react-dom.js

特殊屬性

React中的"html代碼"，其實不是真正的html，而是一種JSX語法，絕大部分標籤同樣用，但有兩個屬性須要修改

• class：className
• 不能拿class直接用。 class要用className代替
• for：htmlFor

單標籤

React中的單標籤必須閉合（html標籤和自定義組件都是）

• <img src="">;錯誤
• <img src="" />;正確

注意⚠️JSX不能單獨用，JSX渲染的時候必須有且僅有一個最頂出dom，標籤必須有結束標籤，單標籤必須閉合'/'