列表组件不断重新渲染

Question

我觉得这可能是因为我不了解 React 的流程，但我一直在努力弄清楚。有一个无限滚动列表。

如果 Row 在 Scroller 之外，它工作正常。

然而，如果 Row 位于 Scroller 内部，则会导致组件不断重新渲染。我希望将一个列表从包含大约一千个项目的父组件传递到 Scroller，但为了做到这一点，我需要 Row 中的 Scroller 才能访问道具.解决此问题的最佳方法是什么？

import React from "react";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";

const Scroller = (randomArray) => {
  const Row = ({ index, style }) => (
    <div className={index % 2 ? "ListItemOdd" : "ListItemEven"} style={style}>
      {randomArray[index]}
    </div>
  );

  return (
    <AutoSizer>
      {({ height, width }) => (
        <List
          className="List"
          height={height}
          itemCount={1000}
          itemSize={35}
          width={width}
        >
          {Row}
        </List>
      )}
    </AutoSizer>
  );
};

export default Scroller;

Answer 1

我不是 100% 确定你在问什么，但我想我有一个想法......

Render props 可能有点令人困惑，但它们本质上是 children 函数组件。意思是，List 必须 的直接子函数是一个接受参数对象并返回 JSX 的函数。有关将数据传递到 List 和从子函数中访问 data 的更多信息，请参阅此 react-window gist。

这是一个工作演示：

根据设计，当用户向上/向下滚动时，应该重新渲染此子函数以从 DOM 添加/删除项目。要查看此行为，请在代码和框窗口中右键单击一个元素，例如 Season Id，然后单击“检查”——您可能需要执行此操作两次以将注意力集中在目标元素上——然后同时按住鼠标将鼠标悬停在代码和框渲染窗口上，向下滚动。您会注意到，项目是根据滚动方向动态添加/删除的。因此，如果您希望在滚动窗口时不会重新渲染此子函数，那么您可能不应该使用虚拟化列表，而应该使用分页。

---

Example.js

import React from "react";
import { FixedSizeList as List } from "react-window";
import AutoSizer from "react-virtualized-auto-sizer";

const Example = ({ dataList }) => (
  <AutoSizer>
    {({ height, width }) => (
      <List
        className="List"
        height={height}
        itemCount={dataList.length}
        itemData={dataList}
        itemSize={265}
        width={width}
      >
        {({ data, index, style }) => {
          const dataItem = data[index];
          return (
            <div
              className={index % 2 ? "ListItemOdd" : "ListItemEven"}
              style={style}
            >
              <h1>Season Id: {dataItem.seasonId}</h1>
              <h2>Form Id: {dataItem._id}</h2>
              <h2>Start Month: {dataItem.startMonth}</h2>
              <h2>End Month: {dataItem.endMonth}</h2>
              <h2>Send Reminders: {dataItem.sentReminders.toString()}</h2>
            </div>
          );
        }}
      </List>
    )}
  </AutoSizer>
);

export default Example;

index.js

import React from "react";
import { render } from "react-dom";
import Example from "./Example";
import dataList from "./data.json";
import "./styles.css";

render(<Example dataList={dataList} />, document.getElementById("root"));