React學習記錄（1）

一、基本概念

1. PWA: PWA是Progressive Web App的英文縮寫， 翻譯過來就是漸進式增強WEB應用， 是Google 在2016年提出的概念，2017年落地的web技術。目的就是在移動端利用提供的標準化框架，在網頁應用中實現和原生應用相近的用戶體驗的漸進式網頁應用，pwa的目標直指原生app

2. serviceWoker: 本地緩存,無網頁可以訪問

3. manifest: Web 應用程序可以被緩存，然後在無互聯網連接的時候進行訪問

4. ReactDOM.render

5. JSX語法

   註釋：
   單行
   多行
   css類名 ==》 className
   laber標籤的for ==》 htmlFor

6. React中的響應式設計思想和事件綁定

   {}的使用: js表達式
   通過bind()指向react實例
   state不允許我們我們做任何的改變,所以我們不可以直接去修改state,必須先複製一份,修改完成,使用setState方法來更新state

7. react代碼的優化: ES6的結構賦值 箭頭函數…

8. react父子組件之間的通信：
   父傳子: 通過props
   子傳父: 父組件先傳遞方法給子組件,子組件通過父組件的方法,向父組件傳值

9. React特點:
   
   propTypes：父組件傳遞給子組件的值 官網詳細
   defaultProps：當父組件沒有給子組件傳值時，定義的默認值

10. 虛擬DOM是什麼？

    虛擬DOM本質是一個js對象，當state改變時，就會觸發render函數重新渲染，生成新的虛擬DOM，原始虛擬DOM和新的虛擬DOM進行比較，並沒有損耗多大的性能。（真實DOM渲染、比較是極大地損耗性能的。）
    

JSX -----> createElement ------> 虛擬DOM（JS對象）------> 真實DOM

11. 虛擬DOM的優點：

 - 性能提升了
 - 他使得跨端應用得以實現。React  Native（既可以在瀏覽器應用，又可以在原生app應用）

12. 虛擬DOM中的Diff算法（面試問題）：

    setState：異步，當多次setState時，可以合併成一個，減少虛擬比對的次數

    同層比對： 原始虛擬DOM和新的虛擬DOM進行同層比對，當第一層相同時，直接全部更新，否則進行下一層的比對

    key設置： key儘量不要設置成index，因爲當進行添加或刪除的時候，index不穩定，會變，比對可能會失敗

ps：前三點目前先了解一下，不需要深入學習