如果只有一部分组件发生变化,React 会渲染整个组件吗?
Does React render the WHOLE component if only one part of the component changed?
我想知道如果我将大型组件拆分为许多非常小的组件,以便应用程序一次只呈现 DOM 的较小部分,我的代码是否会更高效。
但我觉得 React 可能已经只渲染了应用程序发生变化的部分,无论组件是大还是小。因此,如果更改了大型组件的一小部分,React 只会重新渲染该组件的一小部分,而不是整个组件。
我在第二段中的断言是否正确,或者我可以通过将一个大组件拆分成许多小组件来获得更好的性能吗?我在这个问题中包括了 ReactJS 和 React Native。我认为它们在这方面是相同的,但如果它们不同,我想知道。
我一直沉浸在 React 中,所以我希望我的理解是正确的。 React 使用虚拟 DOM 来优化实际 DOM 的渲染。本质上是区分两者,只修补 DOM 的差异。所以我相信你的说法是正确的。
关于拆分大型组件,我认为这完全取决于 state 以及组件的外观。这些是我会问自己的问题:是否有多个 UI 单元可以独立并封装到一个组件中? state 更改实际上影响了我的组件的多少?
我的理解是组件不会重新呈现,除非 state 发生变化。 React 提供了一个生命周期钩子 shouldComponentUpdate
,它不会影响它的子组件,这样开发者可以控制组件在 上的渲染状态变化。因此,如果有很多 JSX 元素不会发生变化,最好 将受状态变化影响的元素提取到一个组件中 。我相信我们可以通过不使用未更改的项目进行虚拟 DOM 更新来提高性能。
在写这个答案时,我用谷歌搜索并找到了这个博客条目:React is Slow, React is Fast: Optimizing React Apps in Practice。我没有使用那里提到的工具,但我可能很快就会试用它们。我相信这篇文章可以阐明你问题的第二部分。
我想知道如果我将大型组件拆分为许多非常小的组件,以便应用程序一次只呈现 DOM 的较小部分,我的代码是否会更高效。
但我觉得 React 可能已经只渲染了应用程序发生变化的部分,无论组件是大还是小。因此,如果更改了大型组件的一小部分,React 只会重新渲染该组件的一小部分,而不是整个组件。
我在第二段中的断言是否正确,或者我可以通过将一个大组件拆分成许多小组件来获得更好的性能吗?我在这个问题中包括了 ReactJS 和 React Native。我认为它们在这方面是相同的,但如果它们不同,我想知道。
我一直沉浸在 React 中,所以我希望我的理解是正确的。 React 使用虚拟 DOM 来优化实际 DOM 的渲染。本质上是区分两者,只修补 DOM 的差异。所以我相信你的说法是正确的。
关于拆分大型组件,我认为这完全取决于 state 以及组件的外观。这些是我会问自己的问题:是否有多个 UI 单元可以独立并封装到一个组件中? state 更改实际上影响了我的组件的多少?
我的理解是组件不会重新呈现,除非 state 发生变化。 React 提供了一个生命周期钩子 shouldComponentUpdate
,它不会影响它的子组件,这样开发者可以控制组件在 上的渲染状态变化。因此,如果有很多 JSX 元素不会发生变化,最好 将受状态变化影响的元素提取到一个组件中 。我相信我们可以通过不使用未更改的项目进行虚拟 DOM 更新来提高性能。
在写这个答案时,我用谷歌搜索并找到了这个博客条目:React is Slow, React is Fast: Optimizing React Apps in Practice。我没有使用那里提到的工具,但我可能很快就会试用它们。我相信这篇文章可以阐明你问题的第二部分。