React：组件是否在每个 setState() 上完全重新渲染？

Question

只是对反应的生命周期有点困惑。 以下是我的理解...

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

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

Answer 1

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

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

1. 虚拟 DOM
2. 真实的 DOM

React 有一个非常智能且强大的 diffing 算法，它计算之前的 DOM state和 Next DOM state之间的差异，称为Reconciliation过程。

只有那些已经改变的子元素会被重新渲染。
键帮助 React 识别哪些项目已更改、添加或删除。
应将键添加到list或array元素中，以使这些元素具有稳定的身份

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

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

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

Answer 2

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

您可以阅读一篇很酷的文章