reactjs - 如何在 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}>);