Verwenden von useEffect und ReactStrictMode: Optimieren von React-Komponenten für Leistung und Zuverlässigkeit

Question

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.

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.

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.

Weiß jemand, warum der erste useEffect den isLoading-Status ignoriert und wie man damit umgeht?

// 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]);

Answer 1

你可以在addMoreData函数中简单地更改这一行

setLoadedData((prev) => [...prev, ...newData]);

为

setLoadedData([...loadedData, ...newData]);

这将使状态根据当前渲染时的值进行更新，因为第二次useEffect运行时组件尚未重新渲染，所以第一个组件所做的更改尚未反映出来，因此loadedData尚未更新。

当你使用函数形式进行更新时，prev是状态的实时值，在开发中使用严格模式时，你会遇到这种情况是正常的。

最后，摆脱isLoading，它不会帮助修复这个问题。

注意：在启用严格模式时，使用setState的函数形式更加推荐，但在useEffect中不推荐使用，因为当组件挂载时，这个钩子会运行两次。
此外，当你在依赖数组中包含data.length和loadedData.length时，这将使useEffect在这些值中的任何一个发生变化时都会触发。