提高多選/懸停性能 state

Question

我正在構建一個使用窗口化/虛擬化的 React 網格應用程序，但我遇到了 state 更新的問題，這些更新顯示出交互滯后的明顯跡象。

我正在嘗試模仿 Google Photo 的多選功能，您可以在其中 select 一張照片，按住Shift鍵並移動鼠標以預選突出顯示的照片。 我在構建這個“預選”功能時遇到了問題，沒有滯后。

我在每個單元格上都有一個onMouseEnter事件，將突出顯示的單元格存儲在 state 中，這是帶有 ref 的當前行索引。 我還將事件包裝在debounce中，延遲 100 毫秒。

Answer 1

從根本上說，圖標效果應該通過 CSS 來實現。即它總是被渲染，你只需使用 CSS :hover來顯示它。

性能問題很可能只是表面現象——圖標可見性固定后，您就不太可能看到任何其他真正的可用性問題。

可以說，盡管您不應該將單元格存儲在 state 中。在 CSS 更改之后，您將不再需要有條件地渲染，因此無需使用 state。這些可以存儲在 refs 中，並進一步引用。 參考要快得多，因為它們不會觸發重新渲染。