就這幾天我所了解到react情況和大家探討一下子react的知識：
react由facebook團隊維護的一套框架，已經應用在instagram網站上了，react以其獨特的性能優化方案，正在被越來越多的前端工程師所接受。
angular是對dom元素的擴展，讓dom元素實現一些功能，ng-show可以讓元素顯示隱藏，ng-repeat重復創建，ng-class切換類等，這些指令為dom添加功能同時，
也會為dom元素開銷，打個比方，比如頁面是一個汽車，angular做法就是為其鑲嵌邊框，給汽車裝飾，結果就是汽車漂亮，很高大上，另一方面，我們也要開足馬力
，才能開動這個汽車。react則另起爐灶，自己創建一個汽車，增加四個軲轆，添加一個發動機，這樣只需很小的馬力，就能驅動這個汽車。
了解完了區別之后，我們就談一談react的一些特點：
1.首先，react它受用的是虛擬的dom；
2.高效，react通過對dom的模擬，最大限度的減少dom的交互；
3.組件化開發，react采用組件化開發，極大限度的使組件得到復用，便於開發管理額維護；
4.適用多端，一處多發，多端適用
有了這些優點，我們就可以開發高性能的網站，什么是高性能的網站，它有以下幾方面的要求：
1.減少http連接請求；
2.避免重新定向鏈接；
3.要把部分內容壓縮；
4.避免css樣式表達式；
5.減少NDS查找；
6.避免重定向鏈接；
7.減少大量DOM操作；
接下來說一下react的基本語法：
jsx是javascript xml的縮寫形式，jsx有自己的優勢和不足，優勢有方便管理，不足為不能運行在瀏覽器當中，需要第三方轉換工具；
react的語法工具和angular和vue差不多，都是{{}}的形式，但是react的執行順序當中，它有生命周期，一般分為四個：
1.mounting這個周期是在創建階段；
2.updating這個階段是更新階段；
3.render這個階段是路由階段，
4.unmounting這個階段是銷毀階段；
接下來我們談一談react組件化開發：第一步，我們首先要按層級拆分組件，拆分組件的時候我們要遵循單一職責原則，還有就是UI和組件層級對應；
2.第二步，開發靜態版本，不用state，只用props，數據放在最頂層的組件中，構建應用的順序；
3.第三部，分析最少量state，但是完備，首先，狀態越少越好維護，比如，Todo List顯示總條數
這里我們就要問了，它是從父級傳過來的嗎？這時在確定原始產品數組；如它是從父級傳過來的，那么它就是一個state；
他會經常改變嗎？這是要確定用戶輸入的關鍵字，如果它經常改變，那么它應該是一個state；
它能通過其他state和props計算出來嗎？這是我們要確定的復選框的狀態以及過濾之后的產品數組；如果它能通過其他state和props計算出來，那他就不是一個state；
這是判斷一個state的依據；
第四步：分析state應該屬於那個組件，找到所有需要用到這個state的組件；
找到他們的公共祖先組件，此組件或者是它的祖先組件應該擁有這個state；
如果找不到合適的，可以創建一個新的組件，它包含了所有用到這個state的組件；
.FilterableProductTable需要用到state來展示過濾后的產品，
.SearchBar需要用到state來展示搜索內容和復選框狀態
他們的共同祖先組件是FilterableProductTable
第五步:構建反向數據流，將搜索框和復選框的改變通知給FilterableProductTable從而形成了一個子組件--父組件--子組件的循環
講完了這些，我們將上面的總結一下，
我們划分組件是按照層級划分的；
state最好盡可能的少，但是必須要完備
理解單向數據流的含義以及單向數據流的使用。
2017-06-18