react 事件處理 render 虛擬DOM

事件處理

通過 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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末院尔,一起剝皮案震驚了整個濱河市蜻展,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌邀摆,老刑警劉巖纵顾,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異隧熙,居然都是意外死亡,警方通過查閱死者的電腦和手機幻林,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門贞盯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人沪饺,你說我怎么就攤上這事躏敢。” “怎么了整葡?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵件余,是天一觀的道長。 經(jīng)常有香客問我,道長啼器,這世上最難降的妖魔是什么旬渠? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮端壳,結果婚禮上告丢,老公的妹妹穿的比我還像新娘。我一直安慰自己损谦,他們只是感情好岖免,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著照捡,像睡著了一般颅湘。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上栗精,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天闯参,我揣著相機與錄音,去河邊找鬼术羔。 笑死赢赊,一個胖子當著我的面吹牛,可吹牛的內容都是我干的级历。 我是一名探鬼主播释移,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼寥殖!你這毒婦竟也來了玩讳?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤嚼贡,失蹤者是張志新(化名)和其女友劉穎熏纯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粤策,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡樟澜,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了叮盘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秩贰。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖柔吼,靈堂內的尸體忽然破棺而出毒费,到底是詐尸還是另有隱情,我是刑警寧澤愈魏,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布觅玻,位于F島的核電站想际,受9級特大地震影響,放射性物質發(fā)生泄漏溪厘。R本人自食惡果不足惜胡本,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望桩匪。 院中可真熱鬧打瘪,春花似錦、人聲如沸傻昙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽妆档。三九已至僻爽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間贾惦,已是汗流浹背胸梆。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留须板,地道東北人碰镜。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像习瑰,于是被迫代替她去往敵國和親绪颖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容