認識React

與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用於解析模板語法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章