Verwenden von useEffect und ReactStrictMode: Optimieren von React-Komponenten für Leistung und Zuverlässigkeit
<p>Ich stehe vor einer Herausforderung: Ich möchte einen Teil des Arrays in ein neues Array namens „loadedData“ laden und nur die geladenen Daten anzeigen, da die Komponente sehr schwer ist. </p>
<p>Beim ersten Laden stieß ich jedoch auf viele Probleme, weil useEffect es scheinbar durcheinander brachte. Der erste Ladevorgang erfolgt zweimal und die ersten Daten werden bei jedem Rendern einmal in das Array übertragen. Wenn ich „reactStrictMode“ entferne, funktioniert es wie erwartet, aber ich möchte nicht „schummeln“, ohne die Konsequenzen zu verstehen. Jemand, der das Problem besser versteht als ich, hat es aus einem bestimmten Grund dort platziert. </p>
<p>Der isLoading-Status kann eine zweite Ausführung während des ersten Ladevorgangs nicht verhindern – dies ist ein Vorschlag, den ich in anderen Threads zu diesem Problem erhalten habe. </p>
<p>Weiß jemand, warum der erste useEffect den isLoading-Status ignoriert und wie man damit umgeht? </p>
<pre class="brush:php;toolbar:false;">// Versuchen Sie, den sichtbaren Teil zu laden, aber laden Sie nicht mehr
const [loadedData, setLoadedData] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const addMoreData = async () =>
if (loadedData.length >= data.length) return;
const startIndex = geladeneDaten.länge;
constPreferredLoadLength = 1;
const endIndex = startIndex + PreferredLoadLength;
const newData = data.slice(startIndex, endIndex);
setLoadedData((prev) => [...prev, ...newData]);
};
// Überprüfen Sie, ob die Tabelle nach dem Mounten und Abrufen von Daten nach unten gescrollt wurde und sofort weitere Daten abrufen muss
useEffect(() => {
const { scrollHeight, scrollTop, clientHeight } = tableContainerRef.current;
Wenn (
scrollHeight == clientHeight &&
scrollTop == 0 &&
geladene Datenlänge <
) {
const addNewDataFunction = async () =>
if (isLoading) {
zurückkehren;
}
setIsLoading(true);
Warten Sie auf addMoreData();
setIsLoading(false);
};
addNewDataFunction();
}
// eslint-disable-next-line reagieren-hooks/exhaustive-deps
}, [data.length, geladeneDaten.länge, isLoading]);</pre>
<p><br /></p>