筆記----深刻淺出《React和Redux》第一章

一、概念與關係：

    （1）React是一個JavaScript語言的工具庫，React自己並不依賴於Node.js，可是開發中用到的諸多工具須要Nodejs的支持。

    （2）安裝Node.js的同時也就安裝了npm，npm是Node.js的安裝包管理工具。

    （3）Facebook提供了快速配置React應用環境的工具( 經過npm 進行安裝 )：   create-react-app

 　　　　　步驟一：

　　　　　　在確認 Node.js 和 npm 安裝好以後，命令行中執行下面的命令安裝全局  create-react-app: （在MAC上輸入這個命令可能要加上 sudo 獲取權限）

　　　　　　

 　　　　   步驟二： 用cd命令 到須要建立項目的目錄下建立項目

                  

　　　　　　最後

　　　　　　

 

　　　　    步驟三：npm start打開本地服務器，端口3000

                                  

　　　　　　初始化目錄

                         

 

二、編寫計算點擊數組件 

                 

 

                       

  

                   

　　　　　　注意：

　　　　　　（1）在從"react"中引入React，是爲了支持JSX語法

　　　　　　（2）在從"react"中引入Component，由於Component是全部組件的基類，提供不少組件共有的功能

　　　　　　（3）JSX中使用的元素不單單是HTML元素，還能夠是React組件（React組件元素的首字母必需要大寫）

　　　　　　（4）JSX的onClick事件處理方式相比HTML的onclick方式 ，優勢以下：

　　                i.  onclick添加的事件處理函數是在全局環境下執行的，容易污染全局環境，

                          而JSX的onClick上掛載的函數都控制在組件內；

                      ii.  當不少個DOM元素添加onclick事件,會影響網頁性能

                          而JSX的onClick，並無產生直接使用onclick的HTML，使用了事件委託的方式處理點擊事件，不管有多少個onClick出現，最後都只是在DOM樹上添加了一個事件處理函

                          數，掛載最頂層的DOM節點上。全部點擊事件都被這個事件處理函數捕獲，而後根據具體組件分配具體函數（優化了性能）

　　　　　　　 iii.在刪除事件對應的DOM元素而忘記刪除對應的事件處理函數，則還會引起內存泄漏問題

　　　　　　　　 而JSX處於生命週期unmount時，會自動清理事件處理函數（避免了內存泄漏問題）

 

三、添加樣式

                    

 

                   

 

 四、React的「響應式編程」思想：

　　UI = render（data）

　　其中，

           render() 是「純函數（輸出只由參數決定，不依賴外部變量，並不會修改傳入的引用類型參數的值）」

　　　  UI的變化只取決與data的變化

 

 五、Virtual DOM概念：

　　Virtual DOM是存在於JS空間的樹狀結構，每次渲染React組件時，都會和上一次的Virtual DOM進行對比，最後只改變有差別部分