如果只有组件的一部分发生变化，React 是否会渲染整个组件？

Question

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

但是我觉得 React 可能已经只渲染了应用程序发生变化的部分，无论组件是大还是小。所以如果一个庞大组件的一小部分被改变，React 只会重新渲染组件的那一小部分，而不是整个组件。

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

Answer 1

我一直沉浸在 React 中，所以我希望我的理解是正确的。React 使用虚拟 DOM 来优化实际 DOM 的渲染。本质上是对两者进行比较，只对 DOM 进行差异修补。所以我相信你的说法是正确的。

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

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

在写这个答案时，我用谷歌搜索并找到了这篇博客文章：React is Slow, React is Fast: Optimizing React Apps in Practice。我还没有使用过那里提到的工具，但我可能很快就会尝试它们。我相信这篇文章可以为您问题的第二部分提供一些线索。