3

パフォーマンスを向上させるために、ツリー コンポーネントを再実装したいと考えています。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

4

1 に答える 1