React：每次调用setState()时，组件是否会完全重新渲染？

Question

最近对 React 的生命周期有些困惑。
这是我的理解...

render() 总是第一个运行，对吗？如果是这样的话...
这意味着在 useEffect() 中的 setState() 只会在初始的 render() 后运行，对吗？

问题：
当上述情况发生时，整个组件是否会重新渲染？
那么加载一个 state 就需要组件再次重新渲染，这难道不会影响性能吗？

- pasoc30

---

我以为React只会重新渲染那些发生变化的子元素，而不是所有元素。 - Snow

我明白了，所以只有依赖于该状态的子元素在状态更改时才会重新渲染？我理解得对吗？ - pasoc30

我听说过类似的事情，但不确定百分之百。 - Snow

渲染通常非常快，除非您有一个巨大的DOM结构。此外，只有更改的部分才会进入DOM。 - Agney

Answer 1

每次状态改变时，会再次调用渲染函数，但不会重新渲染整个组件。
React 在内存中保留了两个 DOM 树对象：

1. 虚拟 DOM
2. 真实 DOM

React 有一个非常智能和强大的差异算法，它计算前一个 DOM 状态和下一个 DOM 状态之间的差异，称为协调过程。
只有那些已更改的子元素将被重新渲染。
键可以帮助 React 识别哪些项已更改、添加或删除。
应该将键添加到列表或数组元素中，以给这些元素一个稳定的标识。

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

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

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

- Zohaib

Answer 2

关于React的事情是，有两个DOM -- 一个是实际的DOM，另一个是虚拟DOM。每次状态改变时，虚拟DOM会重新渲染。然后React将虚拟DOM的更改与实际DOM的更改进行比较，并仅使用实际更改更新实际DOM。重新渲染虚拟DOM不是性能问题，因为它非常快速。

这里有一篇很棒的article可以阅读。

- royranger