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

标签 reactjs react-native react-native-ios

我想知道如果我将大型组件拆分为许多非常小的组件,以便应用程序一次只渲染 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/

相关文章:

reactjs - 将字符串转换为 React 组件

javascript - 如何在等待新图像加载时有条件地渲染微调器?

javascript - react-router-dom 重定向导致 : Maximum update depth exceeded

javascript - 使用 graphql 在 react-native 中重新获取查询

ios - 在 React Native 中隐藏/显示基于服务/动态地来自 json 的标签 <Text>

android - React native 地理定位不适用于设备

javascript - 无法在回调中调用 React Hook "useState"

reactjs - 无法从 React Native 应用程序中的 fetch 访问 json 服务器

javascript - 未找到 Travis CI Jest Preset react-native

react-native - React Native panResponder onRelease 事件窃取可触摸不透明度 onpress 事件