react技術分享（概括總結）

       因爲接下來的項目咱們定下來的前端技術棧是react，考慮到你們都有必定的學習成本，爲了方便你們能更快速的入門react,這裏是我學習過程當中作的一些總結。內容較少涉及語法api,要系統的學習仍是要看官方文檔。這裏只是爲了能讓你們更快的入門而已。

1.react涉及的主要知識點

1.1jsx

       React 容許將 HTML 代碼直接嵌入到 JS 代碼中，對於長久以來一直被"表現與邏輯分離"的思想洗腦，要接受這種代碼的書寫方須要必定的過程，而一旦熟悉了這種在 JS 中支持 HTML 的寫法，就會發現 JSX 的聰明之處。

       傳統的 MVC 是將模板放在其餘地方，好比 <script> 標籤或者模板文件，再在 JS 中經過某種手段引用模板。React 則把 HTML 模板直接嵌入到 JS 代碼裏面，作到了模板和組件的直接關聯。

組件屬性：爲了和原生的 HTML 標籤進行區分，組件變量使用大寫開頭，並且爲了和原生屬性以及 js 關鍵字區分，組件屬性中的 class 要寫成 className。

JS 表達式：組件屬性中使用表達式，要用 {} 替換 " " ，同時在 JSX 進行註釋要用 {} 包起來。

1.2state& virtualdom

      state是組件的當前狀態，能夠把組件簡單當作一個「狀態機」，根據狀態state呈現不一樣的 UI 展現。

一旦狀態（數據）更改，組件就會自動調用 render 從新渲染 UI，這個更改的動做會經過this.setState方法來觸發。

      當組件狀態state有更改的時候，React 會自動調用組件的render方法從新渲染整個組件的 UI。可是如此大規模地操做 DOM ，會對性能形成很大的影響，所以 React 實現了一個 Virtual DOM，在 這個Virtual DOM 實現了一個 diff 算法，當 state 變化時，便經過 diff 尋找須要更新的節點，再把這個修改更新到瀏覽器的 DOM 節點上，至關於實現了局部的更新，在性能上比原生的 DOM 要快許多。

1.3props

      父子組件交互由外部經過 JSX 屬性傳入設置，好比由父組件傳遞過來的 id，子組件經過props獲取到父組件傳過來的值。props一旦設置完成，通常是不可更改的。

1.4組件生命週期

componentWillMount 在渲染前調用。
componentDidMount 在第一次渲染後調用。
以後組件已經生成了對應的DOM結構，能夠經過this.getDOMNode()來進行訪問。
若是你想和其餘JavaScript框架一塊兒使用，能夠在這個方法中調用setTimeout, setInterval或者發送AJAX請求等操做(防止異部操做阻塞UI)。
componentWillReceiveProps 在初始化render時不會被調用，當組件接收到一個新的prop時被調用
shouldComponentUpdate 返回一個布爾值。當確認不須要更新組件時使用。在組件接收到新的state或新的props時被調用。在初始化時或使用forceUpdate時不被調用
componentWillUpdate 初始化不會調用。組件接收到新的state或者props但尚未render時被調用
componentDidUpdate 初始化不會調用。組件完成更新後當即調用。
componentWillUnmount 組件從DOM中移除的時候馬上被調用。

1.5核心思想

單向數據流，組件封裝

      React 十分強調組件的概念，對於全部功能獨立的模塊均可以抽離成組件，而後在須要的地方 import ，下降了代碼之間的耦合性，而且方便維護。父子組件的交互使用props傳遞值，因爲單向的數據綁定，保證了狀態不會混亂。

 

2.react和咱們傳統的jquery開發方式有什麼不一樣？

2.1編程思想的不一樣

jquery開發：監聽事件=》判斷當前業務狀態=》直接操做dom元素

react開發：監聽事件=》判斷當前業務狀態=》修改state=》render修改dom元素（最小化修改）

如圖所示：

二者之間最大的區別就是react有一層state做爲中間過渡，不須要關係dom哪裏發生了變化，只須要變動state便可，剩下的react幫咱們作。而jquery沒有這層過分，直接操做dom。

2.2優缺點比較

jquery缺點：在邏輯複雜的狀況下，咱們須要花很大的精力來理清各類業務邏輯之間的聯繫。而且直接操做dom,難以寫出優雅的代碼。且代碼耦合度高，難以維護。 jquery優勢: 門檻低易上手，只是簡單頁面能夠快速開發完成。 react缺點：學習成本高難以上手，相似咱們公司的狀況，前期沒有組件積累，開發緩慢。 react優勢:  頁面因爲是以組件的形式拆分，相對於jquery來講，耦合性比較低，較好維護。