reactjs - 如果仅更改组件的一部分，React 是否会渲染整个组件？

Question

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

但我觉得 React 可能已经只渲染应用程序中发生更改的部分，无论组件是大还是小。因此，如果大型组件的一小部分发生更改，React 只会重新渲染组件的这一小部分，而不是整个组件。

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

Answer 1

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

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

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

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