# React 是什么 用腳本進行DOM操作的代價很昂貴。有個貼切的比喻，把DOM和JavaScript各自想象為一個島嶼，它們之間用收費橋梁連接，js每次訪問DOM，都要途徑這座橋，并交納“過橋費”,訪問DOM的次數越多，費用也就越高。 因此，推薦的做法是盡量減少過橋的次數，努力待在ECMAScript島上。因為這個原因react的虛擬dom就顯得難能可貴了，它創造了虛擬dom并且將它們儲存起來，每當狀態發生變化的時候就會創造新的虛擬節點和以前的進行對比，讓變化的部分進行渲染。整個過程沒有對dom進行獲取和操作，只有一個渲染的過程，所以react說是一個ui框架。 ## 學習 React 需要些什么基礎 react的功能其實很單一，主要負責渲染的功能，現有的框架，比如angular是一個大而全的框架，用了angular幾乎就不需要用其他工具輔助配合，但是react不一樣，他只負責ui渲染，想要做好一個項目，往往需要其他庫和工具的配合，比如用redux來管理數據，react-router管理路由，react已經全面擁抱es6，所以es6也得掌握，webpack就算是不會配置也要會用，要想提高性能，需要按需加載，immutable.js也得用上，還有單元測試。 ## React 的組件化 react的一個組件很明顯的由dom視圖和state數據組成，兩個部分涇渭分明。state是數據中心，它的狀態決定著視圖的狀態。這時候發現似乎和我們一直推崇的MVC開發模式有點區別，沒了Controller控制器，那用戶交互怎么處理，數據變化誰來管理？然而這并不是react所要關心的事情，它只負責ui的渲染。與其他框架監聽數據動態改變dom不同，react采用setState來控制視圖的更新。setState會自動調用render函數，觸發視圖的重新渲染，如果僅僅只是state數據的變化而沒有調用setState，并不會觸發更新。 組件就是擁有獨立功能的視圖模塊，許多小的組件組成一個大的組件，整個頁面就是由一個個組件組合而成。它的好處是利于重復利用和維護。 ## React 的 Diff算法 react的diff算法用在什么地方呢？當組件更新的時候，react會創建一個新的虛擬dom樹并且會和之前儲存的dom樹進行比較，這個比較多過程就用到了diff算法，所以組件初始化的時候是用不到的。react提出了一種假設，相同的節點具有類似的結構，而不同的節點具有不同的結構。在這種假設之上進行逐層的比較，如果發現對應的節點是不同的，那就直接刪除舊的節點以及它所包含的所有子節點然后替換成新的節點。如果是相同的節點，則只進行屬性的更改。 對于列表的diff算法稍有不同，因為列表通常具有相同的結構，在對列表節點進行刪除，插入，排序的時候，單個節點的整體操作遠比一個個對比一個個替換要好得多，所以在創建列表的時候需要設置key值，這樣react才能分清誰是誰。當然不寫key值也可以，但這樣通常會報出警告，通知我們加上key值以提高react的性能。 :-: