React學習-深入DOM抽象

一、Props: props是實現組件組合的關鍵。props是React的一種從父組件向子組件傳輸數據的機制。他們在子組件中是不能被修改的;props由父組件傳輸出去,也被父組件縮“擁有”。

二、state: React的組件可以在this.state裏保存可變的數據

三、react中的事件:React中的事件,是通過自動事件委託來實現高性能。React不會將事件處理程序附加到節點自身。相反,他會講一個單獨的事件處理偵聽器附加到文檔的根節點,當事件觸發的時候,React將他映射到適當的組件元素。當組件被卸載的時候,React還會自動的移除對應的事件偵聽器。(事件的命名:原生的HTML不是駝峯命名,React中的事件的名稱是駝峯命名)。

四、JSX編寫代碼時注意規範: 1.標籤特性纔去駝峯式大小寫的風格 2.所有元素都必須閉合(沒有閉合標籤就自閉合) 3.特性名稱基於DOM API

五、JSX的使用小技巧:1.單一根節點: React的render中的return方法只能渲染一個跟節點,即只能有一個父級大標籤。2.條件語句:在編寫jsx的時候if可能會被轉化爲非法的js語句,因此可以使用三元表達式來解決條件判斷中出出現的問題,還可以將條件外置,在jsx外部判斷之後賦值,然後在jsx中渲染。

六、空格:JSX不會再多行之間自動渲染一個空格,因此想要一個空格,可以手動插入,使用{“ ”}。這樣就可以在多行之間實現一個空格。

七、使用dangerousSetInnerHTML,可以實現在JSX的內部渲染任何的HTML標籤。

這麼做的意義在於,{__html:...} 背後的目的是表明它會被當成 "type/taint" 類型處理。 這種包裹對象,可以通過方法調用返回淨化後的數據,隨後這種標記過的數據可以。注意__html是兩個_

被傳遞給 dangerouslySetInnerHTML。

八、內聯樣式:在React組件中,可將內聯樣式指定爲一個JavaScript對象。樣式的名稱纔去駝峯式大小寫規則,以保持和DOM屬性的一致性。此外,並不需要指定像素單位,React會在幕後自動的追加正確的單位。

九、React引入了key特性,key是一個唯一標識符,允許你在需要進行插入、刪除、替換和移動時快速的查找元素。每次在循環中創建一個組件的時候,最好能爲每個子元素都提供一個key,這樣可以幫助React進行匹配同時又能避免性能的瓶頸。

十、子級校正:在React中爲了讓虛擬的DOM喝真是的DOM保持一致,就需要找出必不可少的最小變化數量,這一過程就叫做子級校正。

十一、refs: 在React中我們大部分是在操作虛擬的DOM,但是在那些有必要操作真是DOM的少數情況下,React提供了一個後門,稱爲refs。refs可以像字符串屬性那樣用於任何組件。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章