淺談React元件結構

original_galaxy發表於2018-08-17

可以將元件看做一個物件

  • props屬性集合:儲存初始屬性資料
  • state狀態集合:儲存狀態資料
  • 存在的目的:構造出一個虛擬DOM
  • 核心render函式:根據state狀態,結合props屬性,構建虛擬DOM

以上也反映出了其本質特點

  • render只根據狀態生成對應的虛擬DOM
  • 其它工作均由React自動完成(響應變化、re-render等)
  • 所有變化均由狀態變更引發

關於元件的事件響應

  • React構建虛擬DOM的同時還構建了自己的事件系統,並且所有事件(包括提交事件)的行為都完整地遵循W3C的規範,包括冒泡過程等。
  • 這使得事件在不同瀏覽器上有一致的表現。只是onChange事件稍有些變化。
  • 與瀏覽器事件系統相比,React的事件系統主要增加了兩個特性:事件代理和事件自動繫結,這兩特性極大方便了開發工作。

事件代理

  • 與瀏覽器處理事件方式不同,React並未將事件處理函式與對應的DOM節點直接關聯,而是在頂層,採用一個全域性事件監聽器,監聽所有事件。
  • React會在內部維護一個對映表,記錄一種對應關係,哪種對應關係呢?是事件與元件事件處理函式的對應關係,當某事件發生時,React根據此對映表將事件分派,分派給指定的事件處理函式。
  • 若對映表中無事件處理函式,則不做任何操作。元件安裝/解除安裝時,相應的事件處理函式會自動從事件監聽器的內部對映表中新增/刪除。

事件自動繫結

  • JavaScript中建立回撥函式時,一般要將方法繫結到特定例項,以保證回撥函式中this的正確性。
  • React中,每個事件處理回撥函式都會自動繫結到元件例項(除非用ES6語法)。
  • React通過快取繫結的方式實現CPU和記憶體效能優化(亦降低了開發程式碼量)。
  • 事件的回撥函式被繫結在React元件上,而不是原始元素,即事件的回撥函式中this所指的是元件例項而不是DOM元素(React通過一個稱為autobinding的過程自動將回撥函式繫結到當前的元件例項上)。

合成事件

...待編輯

相關文章