如果只更改了组件的一部分，React是否呈现WHOLE组件？

Question

我想知道如果我将大型组件拆分成许多非常小的组件，我的代码是否会更高效，因此应用程序一次只能渲染较小的DOM部分。

但我觉得React可能已经只渲染了应用程序中发生变化的部分，无论该组件是巨大还是微小。因此，如果改变了一个巨大组件的一小部分，React将只重新渲染组件的那一小部分，而不是整个组件。

我的第二段中的断言是正确的，还是可以通过将大型组件分成许多小组件来获得更好的性能？我在这个问题中包含了ReactJS和React Native。我认为他们在这方面是相同的，但如果他们不同我想知道。

Answer 1

我一直沉浸在React中，所以我希望我的理解是有效的。 React使用虚拟DOM来优化实际DOM的呈现。本质上是差异化两个，只有差异修补DOM。所以我相信你的断言是正确的。

关于拆分大型组件，我认为这完全取决于状态以及组件的外观。这些是我会问自己的问题：是否有多个UI单元可以单独使用并封装到组件中？我的组件实际上有多少受到状态更改的影响？

我的理解是除非有状态更改，否则组件不会重新渲染。 React提供了一个生命周期钩子 shouldComponentUpdate ，它不会影响它的子组件，因此开发人员可以在 状态更改 <上控制组件的呈现/ strong>即可。因此，如果有许多JSX元素没有变化，最好 将受状态变化影响的元素提取到组件中 。我相信，我们可以通过不使用不会更改的项目进行虚拟DOM更新来获得性能。

在写这个答案时，我用Google搜索并找到了这个博客文章：React is Slow, React is Fast: Optimizing React Apps in Practice。我没有使用那里提到的工具，但我很快就会尝试一下。我相信这篇文章可以解释你问题的第二部分。