事件處理
通過 onXxxx 屬性指定事件處理函數(shù)(小駝峰形式)
通過 event.target 可以得到發(fā)生事件的 dom 元素
使用 JSX 語法時你需要傳入一個函數(shù)作為事件處理函數(shù)彼绷,而不是一個字符串溺健。
在原生 DOM 中各薇,我們可以通過返回 false 來阻止默認行為,但是這在 React 中是行不通的雄坪,在 React 中需要明確使用 preventDefault() 來阻止默認行為。
事件回調函數(shù)里的 event 是經(jīng)過 React 特殊處理過的(遵循 W3C 標準),所以可以放心地使用它状您,而不用擔心跨瀏覽器的兼容性問題傀蓉。
注意:在使用事件回調函數(shù)的時候欧漱,需要特別注意 this 的指向問題。因為在 React 里葬燎,除了構造函數(shù)和生命周期鉤子函數(shù)里會自動綁定 this 為當前組件外误甚,其他的都不會自動綁定 this 的指向為當前組件,因此需要我們自己注意好 this 的綁定問題谱净。
通常而言窑邦,在一個類方式聲明的組件里事件回調,需要在組件的 constructor 里綁定回調方法的 this 指向壕探。
render函數(shù)
當組件的 state 或者 props 發(fā)生改變的時候冈钦,render 函數(shù)就會重新執(zhí)行
當父組件的 render 函數(shù)重新執(zhí)行時,子組件的 render 函數(shù)也會重新
執(zhí)行虛擬DOM
本質上其實就是一個 object 對象李请;
虛擬 dom 上的屬性比較少瞧筛,真實 dom 屬性多,因為虛擬 dom 只在 react 內部使用导盅,用不到那么多的屬性
虛擬 dom 最終會被 react 轉換成真實 dom较幌,呈現(xiàn)再頁面上
大致過程:state數(shù)據(jù)? jsx模版
數(shù)據(jù)+模版 結合,生成虛擬DOM(虛擬DOM就是一個JS對象白翻,用它來描述真實的DOM)(損耗了性能)
用虛擬DOM的結構生成真實的DOM來顯示state發(fā)生改變
數(shù)據(jù)+模版 生成新的虛擬DOM(極大提升了性能)
比較原始虛擬DOM和新的虛擬DOM的區(qū)別绅络,找差異(極大提升了性能)直接操作DOM,改變內容
優(yōu)點:性能提升使得跨端應用得以實現(xiàn)
虛擬 DOM 中的 key 的作用:當狀態(tài)中的數(shù)據(jù)發(fā)生改變時,react 會根據(jù)新數(shù)據(jù)生成新虛擬 DOM隨后 react 會進行新虛擬 DOM和舊虛擬 DOM的 diff 算法比較
若舊 DOM中找到了與新 DOM相同的 key恩急,則會進一步判斷兩者的內容是否相同如果也一樣杉畜,則直接使用之前的真實 DOM,如果內容不一樣衷恭,則會生成新的真實 DOM此叠,替換掉原先的真實 DOM
若舊 DOM中沒找到與新 DOM相同的 key,則直接生成新的真實 DOM随珠,然后渲染到頁面
不用 index 作為 key 的原因:若對數(shù)據(jù)進行逆序添加灭袁、逆序刪除等破壞順序的操作時會產生不必要的真實 DOM 更新,造成效率低下如果結構中還包含輸入類的 dom窗看,會產生錯誤 dom 更新茸歧,出現(xiàn)界面異常
diff算法
在 react 中如果某個組件的狀態(tài)發(fā)生改變,react 會把此組件以及此組件的所有后代組件重新渲染
不過重新渲染并不代表會全部丟棄上一次的渲染結果显沈,react 還是會通過 diff 去比較兩次的虛擬 dom 最后 patch 到真實的 dom 上diff 算法只比較同一層級软瞎,不跨級比較
tag 不相同則直接刪掉重建,不再深度比較拉讯;
tag 和 key 兩者都相同涤浇,則認為是相同節(jié)點,也不再深度比較雖然如此魔慷,如果組件樹過大只锭,diff 其實還是會有一部分的開銷因此react 內部通過 fiber 優(yōu)化 diff 算法,外部建議開發(fā)者使用 SCU 和pureComponent