Question

我正在开发画廊，但是当我超过200个组件时，我会遇到性能问题。目前在我的画廊中，我可以过滤图像并根据某些属性对其进行排序。我尝试使用“延迟加载”来提高性能，但它给我带来了我以前没有的其他问题。而且，如果我仍然显示所有元素，它也不能解决问题。我想尝试一种类似于“反应虚拟化”的方法，该方法可以永久性地更新DOM，但是我真的不知道该怎么做，我的印象是“反应虚拟化”并未考虑用于整个组件。

我的图库组件如下所示：

const Gallery = memo(props => {
  const { imgs } = props;
  const { onClickHere } = props;
  return (
    <div className="cards-container">
      {imgs.map((img, index) => (
        <GalleryImage
          img={img}
          index={index}
          onClickHere={onClickHere}
        />
      ))}
    </div>
  );
});

“我的图像”组件如下所示：

const Image = props => {
  const { img } = props;
  const { index } = props;
  const { onClickHere } = props;
  const { alt } = props;

  return (
    <div className="cards-child">
      <div className="gallery-card">
        <img className="gallery-thumbnail" src={img.uri} alt={alt} />
        <div className="card-info">
          <span className="card-info_text">
            <span className="badge badge-secondary">
              {img.attr.join(", )} 
            </span>
          </span>
        </div>
        <span className="card-icon-open fa fa-expand" onClick={e => {onClickHere(e, img, index);}} />
      </div>
    </div>
  );
};

这些组件显示的可点击图像列表的大小均相同。您是否知道我是否真的可以使用react-virtualized并做得不好（如果是这种情况，您可以帮助我更清楚地看到）还是您知道一种改善这些性能的方法？

Answer 1

一方面，我们有来自虚拟DOM的渲染周期。在这种情况下，React将在道具更改或父项渲染时渲染每个组件。

要在此处提高性能，您可以记住该组件，以便仅在其prop更改时才渲染，而在父级更改时不渲染。因此，根据您的情况，您可能想使用memoize Image而不是Gallery。请注意，Gallery正在接收onClickHere，并将其传递给Image。确保回调文件包装在useCallback中，因此不会在每个渲染上都创建一个新引用（memo将被识别为新参数并渲染该组件）。

另一方面，我们有实际的DOM渲染。在这种情况下，React仅在发生更改时才呈现任何内容，并且仅更改必要的HTML。

虚拟化插件有助于避免呈现所有HTML，而只是重新编写必要的内容。这很有用，因此浏览器具有最少的必需HTML，因为如果节点数量很大，可能会很滞后。在实施这些方法之前，请尝试将Image中的div数量减少到最小。

仅在必要时应用性能改进，并进行测试以查看是否从中受益。在您的情况下，主要问题可能是显示太多HTML元素。同样，您的地图函数似乎缺少key。

改善Reactjs的性能，以呈现大量组件

1 个答案: