1 React的基本認識
? ? Facebook開源的一個js庫
? ? 一個用于動態(tài)構建用戶界面的js庫
? ?react特點?
????????聲明式編碼
????????組件化編碼
? ? ? ? 支持客戶端和服務器端渲染
? ? ? ? 高效
? ? ? ? 單向數(shù)據(jù)流
? ?react高效的原因
? ? ? ? 虛擬DOM终娃，不總是直接操作DOM
? ? ? ? 高效的DOM算法内边，最小化頁面重繪? （明哥的理解：react知道頁面哪里發(fā)生了改變痹雅，只關注改變的那部分）
2 使用React??
? ? ReactDOM.render(<h1>Hello, React!</h1>,document.getElementById('example'));
? ? 將<h1>hello,react</h1> 宾舅，渲染到id=example的DOM中
? ? 但是這里注意第一個參數(shù) ?<h1>hello?react</h1>，他是沒有引號的炊林，第一個參數(shù)不是普通的html字符串姥卢，而是一個jsx語法中的對象
3虛擬DOM
? ? 1 React?提供了一些API來創(chuàng)建一種特別的js對象
? ? ? ? var?element = React.createElement('h1',{id:'myTitle'},'hello');
? ? ? ? 上面創(chuàng)建的就是一個簡單的DOM虛擬對象
? ? 2?虛擬DOM對象都最終會被React轉(zhuǎn)換為真實的DOM
? ? 3?我們編碼時基本只需要操作react的虛擬DOM的相關數(shù)據(jù)，react會統(tǒng)一一起轉(zhuǎn)換為真實DOM變化而更新界面
4 JSX
? ? 1?全稱：Javascript XML
? ? 2?react?定義的一種類似于XML的js擴展語法：XML +JS
? ? 3 作用：?用來創(chuàng)建react虛擬DOM（元素）對象
? ? ? ? ? ? var?ele = <h1>hello JSX</h1>
? ? ? ? ????注意1? 他不是字符串渣聚，也不是HTML/XML標簽
? ? ? ? ????注意2:? 他最終產(chǎn)生的就是一個js對象
? ? 4? 標簽名任意：HTML標簽或其他標簽
????5? 標簽屬性任意：HTML標簽屬性或其他
? ? 6?基本語法規(guī)則
????????遇到<?開頭的代碼独榴，以標簽的語法解析：HTML同名標簽轉(zhuǎn)化為html同名元素，其他標簽需要特別解析
????????遇到{?開頭的代碼奕枝，以js的語法解析：標簽中的js代碼必須用{}包含
????7?babel.js的作用
? ? ? ? 瀏覽器的js引擎是不能直接解析jsx語法代碼的棺榔，需要babel轉(zhuǎn)義為純js的代碼才能運行
? ? ? ? 只要用了jsx，都要加上type=“text/babel”,聲明需要babel來處理
????8渲染虛擬DOM（元素）
? ? ? ? ? ? ?語法：ReactDOM.render(virtualDOM,containerDOM);?
? ? ? ? ? ? ?作用：將虛擬DOM元素渲染到真實DOM中顯示
? ? ? ? ? ? ?參數(shù)說明
? ? ????????????????參數(shù)一：純js或jsx創(chuàng)建的虛擬DOM對象
? ? ? ? ? ? ? ? ????參數(shù)二：用來包含虛擬DOM元素的真實dom元素對象（一般是一個div）
? ? ? ? ? ? ?創(chuàng)建虛擬DOM的2種方式
? ? ? ? ? ? ? ?1純js（一般不用）? ?react.createElement('h1',{id:'myTitle'},title)
? ? ? ? ? ? ? ?2 JSX? ? ? ? ? ? ? ? ? ? ? <h1 id='myTitle'>{title}</h1>
