React中记录增删改后HTML表格更新方式的技术咨询

我并非React使用者，想咨询执行CREATE、UPDATE、DELETE等操作后，HTML表格的常规刷新方式。比如有一个带[New Record]、[Edit]、[Delete]按钮的用户信息表格，点击[Edit]修改记录并保存后，该如何更新表格？不需要代码示例，只想了解主流做法。

之前看到React教程里有开发者用以下方式重定向页面：

const navigate = useNavigate();
...
navigate('/');

我觉得这种方式简单有效，但重建整页会造成资源浪费，所以提出三个问题：

1. 这是React中处理此类场景的流行做法吗？
2. 编写代码仅重建表格而非整页的方案可行吗？
3. 编写代码仅更新特定行的方案如何？

我自己的看法是：第一种方案最简便，无需额外代码；第二种方案需少量额外代码但更节约资源；第三种方案开发成本最高，但仅针对目标行操作。希望得到相关见解。

解答 #

1. 重定向整页的流行度：这种做法在早期React项目或小型项目里确实有人用，优点是实现成本极低，不用管前端状态同步，但绝对不是React生态里的主流做法。因为React的核心优势就是局部更新，整页重定向完全浪费了框架的特性，还会带来页面闪烁、重新加载资源的问题，用户体验不佳，现在更多是临时方案或极小型项目的选择。

2. 仅重建表格的可行性：这不仅可行，还是React里非常常规的做法。本质是通过更新表格依赖的数据源状态，让React重新渲染整个表格组件。这种方案开发成本不高，只需要在CRUD操作完成后，重新获取最新的列表数据（或更新本地状态里的列表），触发表格组件的重新渲染。相比整页重定向，它避免了整页资源的重新加载，性能和用户体验都好很多，是中小型项目里的主流选择。

3. 仅更新特定行的方案：这种方案是最优的性能选择，但确实开发成本更高。需要精准定位到修改/删除/新增的行对应的状态数据，只更新那部分数据，让React只重新渲染受影响的行。这种方式适合数据量极大、对性能要求很高的场景，比如大数据表格。但它需要开发者更细致地管理状态，处理数据同步的细节（比如新增行的插入位置、修改行的字段匹配等），所以只有在性能瓶颈明显的时候才值得投入额外成本去做。

总的来说，React里的主流思路是尽量局部更新，避免整页重定向：小型项目若追求最快上手，可能会用整页重定向；大多数场景会选择更新表格数据源来重建表格；大型数据场景才会考虑仅更新特定行。

内容的提问来源于stack exchange，提问作者user1643244