添加、删除或插入单行时，React 是否会重新渲染整个表格？

Question

在对 HTML 表进行 CRUD 操作期间，通常是重新呈现整个表，还是更常见的是只呈现受影响的行，例如更新、删除或插入？

例如，在 JQuery（或纯 Javascript）中，您添加这样的一行而不渲染与此类似的整个表格：

$('#myTable').append('<tr><td>some data</td><td>more data</td></tr>');

删除和更新特定行只是有点困难，因为您通常以当前行为目标，但仍然非常容易。 我从未使用过 React，并且很想知道在 CRUD 操作期间是否通常会重新呈现整个表格。 谢谢你。

Answer 1

React 中的默认行为是当您在组件中设置 state 时，它的所有子组件也将呈现。 所以很可能，您的数据存储在负责整个表的某个父组件中，然后当您更改该数据时，整个表会重新呈现。

但是，需要注意两点：

1. 在此上下文中的“渲染”仅表示反应虚拟 dom 过程。 它可能导致对实际 dom 的更改很少甚至没有
2. 重新渲染所有子项只是默认设置。 如果您遇到性能问题，您可以添加代码以跳过未更改的组件树部分的呈现。 具体而言，主要工具是 function 组件的 React.memo 和 class 组件的 shouldComponentUpdate。

Answer 2

React 遵循虚拟 DOM 差异算法来确定哪些组件需要重新渲染。 当组件的 state 或 props 发生变化时，react 会将当前虚拟 DOM 树与之前的虚拟 DOM 树进行比较，并确定哪些元素已更改，如果需要重新渲染整个表格组件，则将重新渲染所有子组件，包括所有行-呈现。