Ausführliche Erläuterung der Funktionsdrosselung, die das onScroll-Ereignis in JavaScript auslöst

Problembeschreibung

Gemeinsames Website-Layout, eine Navigationsleiste oben, wir gehen davon aus, dass diese Seite vier Spalten hat: A, B, C, D, wir klicken auf A, der Ankerpunkt springt Gehen Sie zu Spalte A, und die Schaltfläche A oben wird hervorgehoben. Klicken Sie auf B, und der Anker springt zu Spalte B, und die Schaltfläche B oben wird hervorgehoben Modul ist die Schaltfläche B hervorgehoben. Das Obige ist ein Modell, dem wir in der Entwicklung häufig begegnen. Wenn Sie jQuery in der Vergangenheit für die Frontend-Entwicklung verwendet haben, sind Sie damit bestens vertraut.

Lösung

Ich möchte hauptsächlich über Methoden zur Leistungsoptimierung bei der Entwicklung von React-Komponenten sprechen.

Unsere Seitenstruktur ist so

<div
 className={style.main}
 id="main"
 ref={(main) => { this.main = main; }}
 onScroll={
 ((/detail/.test(this.props.location.pathname))) ? (() => this.throttle()()) : null
 }
>
 {this.props.children}
 <Footer />

Wir setzen das onScroll-Ereignis in der Hauptkomponente. In diesem Ereignis lösen wir die Aktion aus und ändern den Status durch Redux untergeordnete Komponenten.

Meine Funktion zum Auslösen von Scroll-Ereignissen sieht so aus (ohne die lange Liste zu berücksichtigen, ist dies die ultimative Lösung für den Fehler eines Nachmittags, und ich werde in diesem Artikel nicht auf Details eingehen)

handleScroll() {
 const { changeScrollFlag } = this.props.actions;
 // 根据滚动距离修改TitleBox的样式
 const { basicinformation, holderinformation, mainpeople, changerecord } = {
 basicinformation: document.getElementById('basicinformation').offsetTop - 121,
 holderinformation: document.getElementById('holderinformation').offsetTop - 121,
 mainpeople: document.getElementById('mainpeople').offsetTop - 121,
 changerecord: document.getElementById('changerecord').offsetTop - 121,
 };
 if (window.screen.availHeight > this.main.scrollTop) {
 document.getElementById('gototop').style.display = 'none';
 } else {
 document.getElementById('gototop').style.display = 'block';
 }
 // 得到基础信息区域、股东信息区域、主要人员区域、变更记录区域的offsetTop,我们把它用来跟main的scrollTop比较
 // 比较的结果触发action，改变TitleBox组件样式
 if (this.main.scrollTop < holderinformation) {
 // 基础信息区域
 if (basicinformation === -121) {
 // 如果基础信息模块不存在，我们什么也不做（当然理论上基础信息模块应该是会有的）
 return;
 }
 changeScrollFlag(1);
 return;
 } else if (this.main.scrollTop < mainpeople) {
 // 股东信息区域
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果股东信息栏目不存在，在滚动的时候我们不应该强行把TileBox的高亮按钮设置为holderinformation
 // 因为holdinformation并不存在，我们跳到前一个按钮，让基础信息按钮高亮
 changeScrollFlag(1);
 return;
 }
 return;
 } else if (this.main.scrollTop < changerecord) {
 // 主要人员区域
 changeScrollFlag(3);
 if (mainpeople === -121) {
 // 如果主要人员栏目不存在，在滚动的时候我们不应该强行把TileBox的高亮按钮设置为mainpeople
 // mainpeople并不存在，我们跳到前一个按钮，让基础信息按钮高亮
 changeScrollFlag(2);
 if (holderinformation === -121) {
 // 如果主要人员栏目不存在，而且连股东信息栏目也没有，我们跳到高亮基础信息栏目
 changeScrollFlag(1);
 return;
 }
 return;
 }
 return;
 } else if (this.main.scrollTop > changerecord) {
 // 与上面同理
 // 变更记录区域
 changeScrollFlag(4);
 if (changerecord === -121) {
 changeScrollFlag(3);
 if (mainpeople === -121) {
 changeScrollFlag(2);
 if (holderinformation === -121) {
  changeScrollFlag(1);
  return;
 }
 return;
 }
 return;
 }
 return;
 }
}

Unter diesen ist die Funktion changeScrollFlag() unsere Aktionsverarbeitungsfunktion.

Unsere Funktionsdrosselung

throttle() {
 // onScroll函数节流
 let previous = 0;
 // previous初始设置上一次调用 onScroll 函数时间点为 0。
 let timeout;
 const wait = 250;
 // 250毫秒触发一次
 return () => {
 const now = Date.now();
 const remaining = wait - (now - previous);
 if (remaining <= 0) {
 if (timeout) {
 window.clearTimeout(timeout);
 }
 previous = now;
 timeout = null;
 this.handleScroll();
 } else if (!timeout) {
 timeout = window.setTimeout(this.handleScroll, wait);
 }
 };
}

Unsere Drosselungsfunktion gibt eine Funktion zurück, die einen Zeitstempel setzt. Was tun wir nicht? Es ist auch nicht so, aber der Unterschied zwischen unseren Zeitstempeln ist groß. Löschen Sie den Timer und lösen Sie die Scroll-Funktion aus. Das scheint ganz einfach zu sein, ja, es ist tatsächlich ganz einfach.

Was müssen wir also sonst noch in der Unterkomponente tun?

Aktion empfangen

Die Containerkomponente der zweiten Ebene empfängt die Aktion und übergibt Requisiten über die Containerkomponente der zweiten Ebene an die Anzeigekomponente der dritten Ebene.

Wir müssen diese Requisiten in ComponentWillReceiveProps erhalten.

Denken Sie daran, dass die Verwendung von this.props in ComponentWillReceiveProps keine Änderungen in Requisiten erhält! ! ! Die Komponentenlebenszyklusfunktion enthält einen eigenen Parameter.

componentWillReceiveProps(nextProps) {
 // 在compoWillReceiveProps里接收到Main组件里所触发onScroll事件的改变activebtn样式的index
 // 并且设置为本组件的state
 this.setState({
 activebtn: nextProps.scrollFlag.scrollIndex,
 });
}

Unser Status steuert, welche Schaltfläche wir hervorheben, es ist eine Zahl.

Ändern Sie den Stil der Navigationsleiste

<span
 className={classnames({
 [style.informationactive]: (this.state.activebtn === 1),
 })}
 onClick={() => this.handleClick(1, &#39;basicinformation&#39;)}
>

Hier haben wir das einmalige Auslösen eines Ereignisses von der Komponente der obersten Ebene abgeschlossen und eine Funktionsdrosselung und -schichtung erreicht Das Ereignis Ein Prozess, durch den eine Ebene an eine zugrunde liegende Präsentationskomponente übergeben wird.
Einige aktuelle Gedanken zur Front-End-Entwicklung

Rufen Sie eine Funktion nicht wiederholt in einer Komponente auf, da dies zu einem enormen Verbrauch führt! Schreiben Sie keine neue Funktion für das, was wir mit dem ternären Operator und den Vorlagenzeichenfolgen tun können.

Seien Sie in jsx nicht zu überflüssig. Wir versuchen, es in Form von Variablen zu schreiben, da sonst die Seitenstruktur kompliziert wird und es für uns schwierig wird, Fehler zu erkennen.

Reduzieren Sie Back-End-Anfragen. Wenn Cookies gespeichert werden können, werden Cookies gespeichert.

Versuchen Sie, einfache Komponenten selbst zu schreiben. Andernfalls werden Sie große Schwierigkeiten haben, Anforderungen zu ändern und Stile anzupassen, und Sie werden einige bedeutungslose Dinge tun.

Zusammenfassung

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels für alle beim Lernen oder bei der Arbeit hilfreich sein kann eine Botschaft zum Mitteilen.

Ausführlichere Erläuterungen zur Funktionsdrosselung, die das onScroll-Ereignis in JavaScript auslöst, finden Sie auf der chinesischen PHP-Website!