React總結筆記

react核心概念

  • 元素:一種不變的jsx對象

  • 組件:react中的對象,類比其他語言中的類,組件的實例化過程生成元素,組件的定義分兩種:函數形式、繼承類形式,必須以大寫字母開頭

  • 組件的實例化:實際上沒有這個概念,只是爲了理解,定義組件實際上就是定義了一個標籤,標籤組成元素即相當於實例化。簡單理解,組件就是自定義標籤。

  • React DOM:React系統本身的DOM,可以理解爲React元素所映射的DOM,而React系統將這個DOM渲染出HTMLDOM,但是HTML DOM的變動相當消耗性能,而React DOM則通過某種算法(Diffing)先算出需要改動哪些HTMLDOM然後再修改相應的HTMLDOM,這個過程比直接修改HTMLDOM的性能要高出許多。

  • props:組件實例化中傳入的參數對象 ,任何時候組件內部都不應該修改props中的值,可以是任意類型的參數,通過組件實例化時的屬性鍵值對傳入。

  • state:組件狀態,負責記錄組件數據的對象,與props共同收錄了組件的信息。

  • 生命週期:與vue的生命週期類似,React的對象是純的js對象,爲了與htmlDOM綁定起來,需要進行一系列的操作,創建、掛載、使用、卸載,因此也形成了幾個階段,每個階段預先預定義了鉤子函數,可以對函數重寫以實現功能。

  • jsx:react.createElement()函數的語法糖,一種js的擴充語法。

  • 數據流:數據應該始終從父組件流向子組件,如果有全局的數據共享可以使用context定義。

  • 狀態提升:如果多組件之間有共同使用的數據,應當將數據定義到最高級的組件中。
    babel:編譯器,將es6等特殊代碼轉譯成通用的低版本js代碼。
    webpack/browsify:分包工具,代碼分割。

問題:

  • React是JS框架,不涉及到樣式方面的內容,所以大工程應該怎樣管理樣式?
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章