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