亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React 中實現更好的滾動事件性能

如何在 React 中實現更好的滾動事件性能

一只萌萌小番薯 2022-09-29 15:27:26
如果用戶向下滾動,我想向導航欄添加顏色背景。當 scrollY 的值等于 0 時,導航的背景將變為透明。我在組件DidMount生命周期方法中添加了一個滾動事件。在其中,我放置了一個更改狀態的函數。它的工作原理,但是當我滾動性能急劇下降時,我不知道如何使它更流暢。當狀態.open 等于 true 時,導航元素接收類。componentDidMount() {window.addEventListener("scroll", this.activeNavTab, {  passive: true,  }); }activeNavTab() { if (window.scrollY > 0) {   this.setState(() => ({ navTab: true })); } else {  this.setState(() => ({ navTab: false })); }}componentWillUnmount() {  window.removeEventListener("scroll", this.activeNavTab);}問題 2在自己的自定義方法中操作DOM元素是一種好的做法嗎?例如:toggleMenu() { document.body.classList.toggle("disablescroll"); this.setState((prevState) => ({ open: !prevState.open }));}
查看完整描述

1 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

只是不要每次都調用滾動方法工作時...延遲調用它...最簡單的方法是用函數包裝你的函數。它應該提高性能this.activeNavTablodashdebounce


const delay = 500

const activeNavTabDebounced = _.debounce(this.activeNavTab, delay)

window.addEventListener("scroll", activeNavTabDebounced, {

  passive: true,

});

然后用


componentWillUnmount() {

  window.removeEventListener("scroll", activeNavTabDebounced);

}


查看完整回答
反對 回復 2022-09-29
  • 1 回答
  • 0 關注
  • 102 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號