如何仅突出显示React中设置的大表中的选定行?

Lc0*_*0rE 6 reactjs

我正在使用React处理表组件,我遇到了一个大表集(> 500行)的问题.事实上,当我试图突出我点击的那一行时,我遇到了很大的性能泄漏.

为了实现行选择,我将保持一个状态,其中包含顶部组件中当前活动的行,该行包含表中所有行的容器.当我单击一个单元格时,我将使用单元格所属的行更新此状态.

这会导致render()方法触发我的顶级组件,并且由于重新渲染了大量元素,整个应用程序变得很慢.

如何仅重新渲染选定的行?是否有一般的最佳做法可以避免重新渲染顶级组件下的所有组件?

在此输入图像描述

小智 0

使用 CSS 怎么样?您可以在每行上使用 :hover 属性,并在每次鼠标悬停或单击时更改背景颜色。如果使用 CSS 属性,性能压力会很低。

祝你好运