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

Question

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

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

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

Answer 1

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

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

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

在写这个答案的时候，我用Google搜索并发现了这篇博文： React很慢，React很快：在实践中优化React Apps 。 我没有使用那里提到的工具，但我很快就会尝试一下。 我相信这篇文章可以解释你问题的第二部分。