在React屏幕中将行添加到表中的方法



我正在学习react and redux,我有疑问:

我需要在现有表中添加行。

为此,我将使用的数据保存在Prop中的数组中的所有行中,然后每次添加行时再次渲染此数组。

就像在99行的现有表中添加100行需要再次渲染的所有99行。

这不是昂贵吗?

还是比使用jQuery的传统方式更好(也许是由于虚拟DOM)

还有哪些更好的方法?

react是智能的,如果您使用地图中的密钥道具,它将仅渲染已更改的元素。因为它会从上一个列表中差异。

但是,如果您使用索引而不是唯一的ID,请小心,如果元素数量很大,渲染可能会变得不可靠:https://medium.com/@robinpokorny/index-as-as-a-a-a-key-is-is-is-is-is-is-is-i-an-anti-Pattern-E0349Aece318

react具有 sysecomponentupdate 生命周期,您可以在添加新行时可以检查或不再重新启动零件。

虚拟图几乎可以解决这个问题!

在虚拟DOM上从代码学院页面上拉出:

它如何帮助

当您渲染JSX元素时,每个虚拟DOM对象都会更新。

这听起来效率非常低,但是成本微不足道,因为虚拟DOM可以如此迅速地更新。

一旦虚拟DOM进行了更新,React将虚拟DOM与更新之前拍摄的虚拟DOM快照进行比较。

通过将新的虚拟DOM与预还原版本进行比较,React可以确切地发现哪些虚拟DOM对象已更改。此过程称为"散布"。

一旦React知道哪些虚拟DOM对象已更改,然后React在实际DOM上更新这些对象,只有这些对象。在我们前面的示例中,React将足够聪明,可以重建您的签名列表项目,并独自离开列表的其余部分。

这有很大的不同!React只能更新DOM的必要部分。React的性能声誉主要来自这项创新。

作为旁注,请确保使用关键元素(如果表格中没有唯一的ID,则可以使用数组索引)。在做一张巨大的桌子时,研究诸如分页以帮助性能之类的选项也可能是有益的。

最新更新