提高 Reactjs 渲染大量组件的性能答案

【问题标题】：Improve the performance of Reactjs for rendering large amount of components提高 Reactjs 渲染大量组件的性能
【发布时间】：2020-01-20 11:25:59
【问题描述】：

我正在开发一个库，当我超过 200 个组件时出现性能问题。目前在我的画廊中，我可以过滤图像并根据某些属性对它们进行排序。我尝试使用“延迟加载”来提高性能，但它给我带来了以前没有的其他问题。此外，如果我仍然显示所有元素，它并不能解决问题。我想尝试一个有点像“react-virtualized”的东西，它会永久更新 DOM，但我真的不知道该怎么做，而且我的印象是“react-virtualized”不适合与整个组件一起操作。

我的图库组件如下所示：

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 并且做得很糟糕（如果是这样的话，你能帮我看的更清楚）还是你知道提高这些性能的方法？

【问题讨论】：

标签： reactjs performance rendering react-virtualized

【解决方案1】：

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

为了提高性能，您可以记忆组件，以便它仅在其 props 更改时才呈现，而不是在父项更改时呈现。所以在你的情况下，你可能想要memoizeImage而不是Gallery。请注意，Gallery 正在接收 onClickHere 并将其传递给 Image。确保回调包含在 useCallback 中，因此不会在每次渲染时创建新引用（memo 将识别为新参数并渲染组件）。

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

虚拟化插件有助于避免渲染所有 HTML，而只重新渲染必要的部分。这很有帮助，因此浏览器具有最少的必要 HTML，因为如果节点数量很大，它可能会滞后。在实施这些之前，请尝试将Image 中的 div 数量减少到最低限度。

仅在必要时应用性能改进并测试您是否从中受益。在您的情况下，主要问题可能是显示过多的 HTML 元素。此外，您的地图功能似乎缺少key。

【讨论】：