ReactJs學習筆記01

標籤：重用   lifecycle   高效   js學習筆記   html   改變   dom   組織   狀態   

粗略簡單的表述一下我最近對ReactJs的學習：

1.特性

　　它不是一個完整的MVC,MVVM架構，它和Web Components並不衝突，那什麼是Web Components呢？近年來，web 開發人員們通過外掛程式或者模組的形式在網上分享自己的代碼，便於其他開發人員們複用這些優秀的代碼。同樣的故事不斷髮生，人們不斷的複用 javascript 檔案，然後是 CSS 檔案，當然還有 HTML 片段。但是你又必須祈禱這些引入的代碼不會摧毀你的網站或者web app。WebComponents 是這類問題最好的良藥，通過一種標準化的非侵入的方式封裝一個組件，每個組件能組織好它自身的 HTML 結構、CSS 樣式、javascript 代碼，並且不會干擾頁面上的其他代碼。我認為它和grunt，gulp是一起的，用來構建前端項目。

　　ReactJs的特點就是“輕”，它擁有的是組件化開發思路，更高效，以及降低成本。

 

2.適合的應用情境

　　1.複雜情境下的高效能

　　2.重用組件庫，組件組合

　　3.“懶”，這個懶就是少做無用功，減少浪費時間

3.React Components lifeCycle

　　分為Mounted（）--->Update（）--->Unmounted（）；

　　Mounted是指React Components被render解析產生對應的DOM節點並被插入瀏覽器的DOM結構的過程

　　Update是指一個Mounted的React Components被重新render的過程

　　Unmounted是指一個mounted的React Componentes對應的DOM節點被從DOM結構中移除的這樣一個過程

　　其中對於每一個狀態，React都封裝了對應的hook函數，hook函數也就是鉤子函數。一開始是Windows訊息處理機制的一個平台,應用程式可以在上面設定子程以監視指定視窗的某種訊息。現在則泛指對於hook時間來說，每當特定的訊息發出，在沒有到達目的前，鉤子程式就先捕獲該訊息，亦即鉤子函數先得到控制權。這時鉤子函數即可以加工處理（改變）該訊息，也可以不作處理而繼續傳遞該訊息，還可以強制結束訊息的傳遞。

 

ReactJs學習筆記01