如何在 React 中记住组件列表的一部分

Question

寻找一些 React 渲染/useMemo 指南。

我有一个包含 2,000 多个项目的列表，每个项目都是一个 React 组件。有一个“当前选定”项目的突出显示，该项目独立于列表呈现。这允许我只渲染列表一次。

useMemo(_ => {
  <Item .../>
  <Item .../>
  ...
  <Item .../>
}, [contents])

现在我添加了“展开”其中的列表项的功能，这只会添加新的 DOM 元素，而不会修改处于非展开状态的列表项。

您可以将每个部分想象Item为两部分：

function Item(props) {
  return
    <div>
      <SubItem />
      {
        if (props.open) {
          <OtherItem />
        } else {
          null
        }
      }
    </div>
}

useMemo(_ => {
  <Item open={1 == current} .../>
  <Item open={2 == current} .../>
  ...
  <Item open={n == current} .../>
}, [contents, current])

问题：有没有一种方法可以支持这一点，而不必在每次展开/折叠新项目时重新渲染整个列表？

不幸的是，扩展的 DOM 元素是“流动的”，因此扩展会将列表项推到它后面（不仅仅是悬停/覆盖）。

Answer 1

我认为你可以这样做：

const Item = useMemo( props => {
    return (
        //...your JSX code here.
    )
}, []);

[...2000].map(props => <Item {...props}>);