时间戳

首页 > 解决方案 > react-window 在滚动父 FixedSIzeList 时停止不必要的子 FixedSizeList 行的呈现

javascript - react-window 在滚动父 FixedSIzeList 时停止不必要的子 FixedSizeList 行的呈现

问题描述

在我的反应项目中，我使用react-window包来呈现嵌套列表。每个父FixedSizeList行呈现一个组件，该组件使用另一个FixedSizeList. 父列表目前不超过 14 行。但子列表最多可能包含 2000 行。现在我的问题是，当我尝试滚动父列表时，视口中的所有子列表项似乎都重新呈现。这对我来说有点问题，因为在我的子列表项中，我d3js用来绘制具有过渡效果的条形图。所以这些不必要的重新渲染给了一个整体怪异的 UI。谁能帮助我如何停止这些不必要的渲染。

这是我的问题的一个非常简单的示例的代码和框链接。请打开控制台日志。初始加载后，最顶层的日志应该是这样的：初始控制台日志。

然后，如果您清除控制台并滚动父列表，您将看到如下日志：父滚动后的控制台日志。在这里您可以看到子列表 0 的子列表项正在重新渲染，这对我来说是不需要的。

谁能给我一个可以阻止这些重新渲染的解决方案？

*PS 我没有使用备忘录，因为每一行都在自己更新 dom。

编辑

我认为如果父列表停止将滚动事件传播给子列表，这个问题就会解决。我尝试在父列表行中添加event.stopPropagation()和，但输出与之前相同。event.stopImmediatePropagation()

标签： javascriptreactjsreact-window

解决方案

我们可以memo用来摆脱为同一组不必要地重新渲染的组件props。并用于useCallback防止重新创建功能，从而确保重新渲染子组件。应用这些，我们可以得到这个解决方案：

import "./styles.css";
import { FixedSizeList as List } from "react-window";
import { memo, useCallback } from "react";

const Row = memo(({ index: parentIndex, style: parentStyle }) => {
  console.log("rendering child list", parentIndex);

  const InnerRow = useCallback(({ index, style }) => {
    console.log("rendering child list item", index, "of parent ", parentIndex);
    return <div style={style}>Child Row {index}</div>;
  }, []);

  return (
    <div style={parentStyle}>
      <List height={200} itemCount={1000} itemSize={35} width={270}>
        {InnerRow}
      </List>
    </div>
  );
});

const Example = () => {
  console.log("rendering parent list");
  return (
    <List height={400} itemCount={16} itemSize={300} width={300}>
      {Row}
    </List>
  );
};

export default function App() {
  return (
    <div className="App">
      <Example />
    </div>
  );
}

推荐阅读