React无限滚动，如何不重新渲染以前的项目

Question

我是 React 新手，所以我想知道。我正在创建这个包含 200 多个项目数组的组件，并且我不想立即渲染这些项目，这就是我使用无限滚动功能的原因，以便当用户接近列表末尾时渲染新项目。但是，当由于状态更改而发生这种情况时，以前的项目也会重新渲染，因为创建了新的对象数组。是否有某种方法可以对此进行优化，以便仅渲染新项目而前一个项目保持不变？

这是我的组件，它使用无限滚动并显示项目：

import styles from "./CountriesSection.module.css";
import { useEffect, useMemo, useRef, useState } from "react";
import { useInfinityScroll } from "../hooks/useInfinityScroll";
import CountriesList from "./CountriesList";

const data = new Array(240).fill({});

const CountriesSection = () => {
  const [currentItemsDisplayed, setCurrentItemsDisplayed] = useState(40);

  const componentsToShow = useMemo(() => {
    return data.slice(0, currentItemsDisplayed);
  }, [currentItemsDisplayed]);

  const divRef = useRef(null);
  let isVisible = useInfinityScroll(divRef);

  useEffect(() => {
    if (!isVisible) return;
    setCurrentItemsDisplayed((prevVal) => prevVal + 20);
  }, [isVisible]);

  return (
    <>
      <div className={styles["section-countries"]}>
        <CountriesList countries={componentsToShow} />
      </div>
      <div className={styles.infinity} ref={divRef} />
    </>
  );
};

export default CountriesSection;

国家卡：

import CountryCard from "./CountryCard";
import React from "react";

const CountriesList = ({ countries }) => {
  const countryToCard = (country, id) => <CountryCard key={id} />;
  return countries.map(countryToCard);
};

export default React.memo(CountriesList);

此处的 Codesandbox：https ://codesandbox.io/s/gifted-mclaren-qhn4po?file=/src/components/CountriesList.jsx:0-263

Answer 1

您应该使用React.memoforCountryCard组件。代码沙盒

如果你想优化一个组件（CountryCard）并记住结果，你可以用 包裹它（CountryCard）React.memo。

请查看React.memo 文档。