React：是否在每个setState（）上完全重新渲染了组件？

Question

对反应的生命周期有些困惑。 这是我的理解...

render()总是首先运行，对吧？如果是这样...
这意味着setState()内部的useEffect()仅在初始render()之后运行，对吗？

问题：
发生上述情况时，整个组件会重新渲染吗？
所以这将是第二次组件渲染只是为了加载state。
那不是性能问题吗？

Answer 1

在每次状态更改时，都会再次调用渲染，但不会再次调用整个组件。

React在内存中保留了两个DOM树对象：

1. 虚拟DOM
2. 真实DOM

React具有一个非常智能且功能强大的差异算法，该算法可计算上一个DOM state和下一个DOM state之间的差异，称为对帐过程。

只有那些已更改的子元素将被重新呈现。
键可帮助React识别已更改，添加或删除的项目。
键应添加到list或array元素，以赋予这些元素稳定的身份

例如，您要从列表中删除<input key="i42"/>元素，因此在其实际DOM树对象的左侧，在其虚拟DOM树对象右侧的 >。 React计算两者之间的差异，只有差异会智能地重新创建。

https://reactjs.org/docs/lists-and-keys.html

https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm

Answer 2

因此，关于React的事情是有两个DOM，一个是实际DOM，另一个是虚拟DOM。每当状态发生变化时，虚拟DOM就会重新渲染。然后，React将虚拟DOM的更改与真实DOM的更改进行比较，仅使用实际更改的内容更新真实DOM。 重新渲染虚拟DOM并不是性能问题，因为它超级快。

有一个不错的article，您可以阅读有关此内容