1

寻找一些 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 元素是“流动的”，因此扩展会在其后推送列表项（不仅仅是悬停/覆盖）。

4

1 回答 1

1

我认为你可以这样做：

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

[...2000].map(props => <Item {...props}>);
于 2021-05-09T17:43:17.167 回答