如何突出顯示React中設置的大表中的選定行？

我正在使用React的表組件，並遇到大表集（> 500行）的問題。事實上，當我試圖突出顯示我點擊的那一行時，我遇到了表演中的大量泄漏。如何突出顯示React中設置的大表中的選定行？

爲了實現行選擇，我在頂部組件中包含當前活動行的狀態，該行包含表中所有行的容器。當我點擊一個單元格時，我正在用單元格所在的行更新這個狀態。

這會導致render（）方法觸發我的頂層組件，並且整個應用程序由於重新呈現大量元素而變得緩慢。

如何重新渲染所選的行？是否有避免頂層組件重新渲染所有組件的通用最佳做法？

2017-08-18 Lc0rE

你可以分享你用來突出顯示錶格行或爲其創建一個反應沙箱的代碼片段： –

對每個表格行使用一個固定鍵應該有助於提高性能，因爲不是所有的行都會是在這種情況下，作爲@ShubhamKhatri提到 –

，爲列表元素使用唯一的'key' [[更多內容]（https://facebook.github.io/react/docs/lists-and-keys.html#keys）），使用['shouldComponentUpdate']（https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate）應用您自己的優化以避免不必要的重新渲染，擴展'PureComponent'類，進一步您可以使用['reselect']應用記憶（https://github.com/reactjs/reselect）。 –

有關使用CSS是什麼？您可以在每行上使用：hover屬性，並在每次鼠標移動或單擊時更改背景顏色。如果您使用CSS屬性，性能壓力會很低。

祝你好運

來源

2017-08-18 13:43:08

你好盧卡斯，謝謝你的回答，但我想實現一個行選擇，它在概念上與懸停效果不同。我想讓組件知道有關選擇，以便做出進一步的操作。 – Lc0rE

我最近做了反應的網格組件。我的方法在選擇和鍵盤導航時獲得快速響應的網格：

請勿渲染視口之外的行（可見範圍）。
在註釋中提到的所有行上使用唯一鍵。
將選定的行鍵作爲組件變量（不處於狀態）。
在選擇時更新選定的行鍵變量，然後直接更新DOM而不重新呈現。我得到了網格的引用，然後使用getElementsByClassName設置從任何活動行中刪除活動類。然後將活動類+焦點設置爲所選行。

我意識到你的實施與我的不同，但希望你至少可以得到一些想法。

來源

2018-02-25 13:13:01 Matt

如何突出顯示React中設置的大表中的選定行？

回答

相關問題