reactjs - 使用 react-window 防止在虚拟化树组件中重新渲染 DOM 元素

Question

我想重新实现一个树组件以提高其性能。我使用了 react-window 中的 FixedSizeList。它的工作比较好。它甚至可以处理 100,000 个树节点。

我的问题是，我想为树节点的小开口三角形设置动画。以下css负责动画:

.tree-branch::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  margin-top: 1px;
  margin-left: 23px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid rgba(0, 0, 0, 0.7);
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: -36px;
  transform: rotate(90deg);
  animation-duration: 0.3s;
}

.tree-item-closed::after {
  transform: rotate(0deg);
}

动画不起作用。因为在每次打开和关闭时所有的列表元素 div 都会重新渲染。然后我尝试为列表添加 itemKey 属性以帮助 React 重用 div。

    <List
      className="List"
      height={height}
      itemCount={flattenedData.length}
      itemSize={32}
      width={width}
      itemKey={index => flattenedData[index].id} // key defined
    >
      {Row}
    </List>

它也不起作用。 div 不会更新，而是重新渲染整个 div。这个问题有合适的解决方案吗？如何防止重新渲染？

这是整个示例: https://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-tyxnm

Answer 1

防止react-window从重新渲染列表中的每个项目，您需要:

记住你的行渲染函数

将该函数移出父函数的范围

使用 itemData prop 在父组件和每行渲染函数之间进行通信。

这是在此处的 react-window 示例沙箱中使用的策略: https://codesandbox.io/s/github/bvaughn/react-window/tree/master/website/sandboxes/memoized-list-items

这是使用您的代码的示例:
https://codesandbox.io/s/a-quick-react-tree-component-based-on-react-window-8psp0

使用 useMemo 可能有更简单的方法来做到这一点但我想不通。

如果您使用 Chrome 开发工具检查 DOM 节点，您会发现当一个节点展开时，不再为整个树重新创建 DOM 节点。这会消除您之前在选择新节点时看到的闪烁(在 Chrome 中，而不是在 Firefox 中)。

但是还有其他一些因素会阻止您的旋转动画正常工作。在我上面链接的 CodeSandbox 示例中，我在 border 上添加了一些动画properties 显示一些 CSS 属性的动画是如何工作的，但是 transform 的动画CSS 属性不起作用。我怀疑这个问题与 react-window无关，因此您可能需要单独调试它以找出为什么您的转换没​​有动画但其他属性动画正常。