在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ react項(xiàng)目,如何實(shí)現(xiàn)頁(yè)面滾動(dòng)到某區(qū)域時(shí)給該區(qū)域加懸浮樣式?

react項(xiàng)目,如何實(shí)現(xiàn)頁(yè)面滾動(dòng)到某區(qū)域時(shí)給該區(qū)域加懸浮樣式?

在componentDidMount里監(jiān)聽頁(yè)面滾動(dòng),當(dāng)頁(yè)面scrolltop大于該區(qū)域scrolltop時(shí),setState給區(qū)域懸浮style,否則setState去除懸浮style,每滾一次都setState一次,有什么好的解決方法嗎?因?yàn)樯婕皊tate比較多,也不好針對(duì)這個(gè)寫shouldComponentUpdate。一般這種情況會(huì)有什么好的方案?

回答
編輯回答
吢涼

1.我覺得用setstate不會(huì)有啥問題,你頻繁setstate之后觸發(fā)state的更新,然后react去判斷要不要更新dom,通過dom diff來判斷要更新哪里,你如果只是改了style這個(gè)state,那對(duì)其他的state沒有影響,要更新的也只是涉及style的這塊dom,比你原生js去操作dom,只是多了判斷是否要更新,還有dom diff兩個(gè)步驟
2.唯一可能存在的一個(gè)問題是setState是異步的,因?yàn)橛幸粋€(gè)隊(duì)列,所以對(duì)滾動(dòng)的響應(yīng)可能會(huì)有延遲

2018年3月27日 10:29
編輯回答
忠妾

不就是一個(gè)addClass。removeClass操作。沒必要弄State吧。

2018年7月13日 20:23
編輯回答
毀憶

使用setState應(yīng)該不會(huì)有什么問題,react v16之后會(huì)自動(dòng)合并短時(shí)間內(nèi)的多次更新。

2018年9月20日 00:57
編輯回答
別逞強(qiáng)

感覺你的疑問是每次做setState會(huì)觸發(fā)React重新做DOM DIFF運(yùn)算,你覺得可能影響UI響應(yīng)效率?

如果是這樣,幾個(gè)優(yōu)化點(diǎn):

  1. 不要監(jiān)聽onScroll,兩個(gè)替代方案:requestAnimationFrame/setTimeout
  2. 每次setState之前做一次臟檢查,臨界點(diǎn)更替的情況 既 !== 的情況再setState
2017年3月21日 18:50