與VueJs的區別
- Vue更注重視圖的自動同步,使用習慣偏向前端人員
- React更注重組件及其狀態的管理,使用習慣偏向程序人員
React生態圈
- jsx:擴展了js自身的語法,是React的基礎
- Fulx:React的數據流組件
- Redux:比Flux更加簡單,易用
- React-Native:用react編寫原生移動應用
- React-Server:服務端渲染React組件
JSX
jsx是一門獨立的語言,希望能改進js的很多問題,但是ES6出現後,包含了jsx的大部分特性,所以很少獨立使用
- babel可以編譯jsx
- react是基於jsx語法
JSX的主要特色
提供模板式創建元素的方法
//普通元素創建
let oDiv = document.createElement('div');
oDiv.title = 'DarkCode';
oDiv.innerHtml = "box";
//jsx方式
let oDiv = <div title="DarkCode">box</div>
注意:jsx並不會真正的創建DOM元素(內部名稱:Node),jsx只是解析模板語法,創建虛擬DOM節點需經由ReactDOM渲染纔會成爲真正的DOM元素
關於虛擬DOM
直接操作DOM元素非常緩慢(資源開銷是普通數據操作的數千倍),所以很多框架(Vue、React)都具備虛擬DOM特性,我們直接操作的是虛擬DOM,而非真實節點,React會在合適的時機批量更新DOM節點(一般是主進程空閒時),從而提高性能
能否單獨使用JSX
不能,React強依賴JSX用於解析jsx語法,但jsx強依賴於React用於解析模板語法