如何优化这个 React 组件以获得更好的性能？

Question

我正在开发一个 React 应用程序，我有一个渲染项目列表的组件。我注意到，随着列表的增长，组件的性能会下降。这是组件的代码

import React, { useState, useEffect } from 'react';

const ItemList = ({ items }) => {
  const [filteredItems, setFilteredItems] = useState([]);

  useEffect(() => {
    // Expensive filtering operation
    const filterItems = () => {
      return items.filter(item => item.isActive);
    };
    setFilteredItems(filterItems());
  }, [items]);

  return (
    <div>
      {filteredItems.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default ItemList;

** 该组件是否可以进行任何性能改进？ 在 React 中是否有更好的方法来处理过滤或渲染大型列表？ 我已经尝试过使用 React.memo 和 useCallback，但性能问题仍然存在。任何建议或最佳实践将不胜感激！**

Answer 1

useMemo()

和

useCallback()

可以防止在每次渲染时重新创建函数或重新计算某些值/状态，它并不能解决渲染两个事物的问题。要解决这个问题，您基本上有两种选择：

1. 分页
2. 虚拟化

分页

不是显示所有项目的列表，而是显示具有固定大小的项目（如 10、20、30）的不同页面，例如谷歌或亚马逊搜索结果中的情况。这通常是最直接的实现，不需要第三方库。

虚拟化

这里的想法是，用户只能看到列表的某个子集，因此仅渲染用户看到的内容就足够了（以及顶部和底部的一些填充以允许无缝滚动）。当用户滚动并且其他项目进入视图时，这些项目将根据需要延迟渲染。

通常您会使用一些库来完成此操作，例如react-virtualize或TanStack Virtual。

分页通常带有一些约束，例如行应该具有相同的固定高度。也有一些方法可以解决这个问题，但它们可能会再次导致一些性能问题。