技巧来提高你的应用程序的反应性能

你是否感觉到你的应用程序执行反应慢吗?当您构建的应用程序往往增长,这个问题是很常见的。在这里,我想与大家分享一些建议关于如何提高任何反应的应用程序的性能。

我们的朋友——Chrome DevTools和开发工具的反应

优化的第一步是测量。只有在确定存在于应用程序的瓶颈,可以消除它们。Chrome DevTools为反应提供强大的性能度量应用程序。反应开发工具还带有一个分析器工具。分析器只能使用在发展模式或production-profiling构建的反应。这两个工具帮助我们分析和测量应用程序的性能。

现在,让我们看看一些提示和技巧系反应应用程序:

安装和卸载的组件常常是相当昂贵的。它可以导致重画/回流由浏览器导致其他HTML元素转变。而不是完全移除DOM元素,您可以使用某些策略设置CSS不透明度来0或设置可见性来没有一个。这种方式,组件仍将在DOM但看不见,没有任何性能成本。

在反应中,每当有道具的变化在父组件的子组件将自动被重现。但有情况下,我们不希望某些子组件自动重新呈现。

在这些场景中,确保使用备忘录提供的函数反应,或者使用PureComponent。通过使用这些,反应比以前的道具与新收到道具。只有改变单元格。在整个函数功能组件包备忘录函数,基于类组件扩展类PureComponent。

如果您正在使用钩子反应,看看useMemo钩,以防止不必要的计算工作。

代码分割方法将整个代码库的代码块。我们这样做的原因是优化性能。最初应用程序加载时我们不需要代码,所有的礼物。我们只需要加载应用程序所需的代码。每当我们需要搬到一个特定的页面,然后我们可以加载该页面所需的资源,而不是在初始化加载相同的。

反应提供了两种方法懒惰的和悬念。它们被用于动态导入块和在应用程序中加载它们。指这文档了解如何使用它们。

匿名函数不是持久性组件时不可避免地会再次呈现。这导致JavaScript分配新的内存每次该组件是单元格,而不是分配一块内存只有一次,当使用命名功能。

通常在您的应用程序,你会呈现与大量数据列表会影响性能。你应该呈现的一小部分数据列表中可见视窗内。然后,您可以提供更多的数据被滚动列表;因此,数据显示只有当它在视窗。这个过程称为窗口或虚拟呈现。

有几种其他方法改善反应的应用程序的性能。在这篇文章中,我讨论了最有效和最常用的性能优化方法。我希望你喜欢阅读本教程。谢谢你！

喜欢这篇文章吗?如果是这样,得到更多的类似的内容订阅解码,我们的YouTube频道!