淺談React組件結構

能夠將組件看作一個對象

  • 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的過程自動將回調函數綁定到當前的組件實例上)。

合成事件

...待編輯瀏覽器

相關文章
相關標籤/搜索