Web前端：如何提高React原生应用性能

React Native拥有大量追随者，从财富500强公司到新的创业公司。开发人员可以使用React Native为IOS和Android上的移动应用程序创建出色的移动UI。

随着React Native的一切进展顺利，它甚至有负面影响吗?是的，确实如此。这是React Native应用程序性能的障碍!

React原生App性能下降的主要原因是什么?

Javascript端的代码越多，应用程序的运行速度就越慢。像JavaScript这样的单线程编程语言限制了性能，因为它可以同时完成单个任务。你可以检查Javascript和UI系统线程的帧速率，看看你的应用的性能瓶颈在哪里。

它还取决于你的代码，因此请避开任何可能阻塞线程的东西，例如同步网络调用或无限循环。当心FlatList，因为它们是React本机性能问题的罪魁祸首。

检查内存泄漏

内存泄漏是一种固有的性能挑战，它的发生是因为在应用程序的后台运行了一些不必要的进程。由于可用内存减少，内存泄漏会降低计算机性能。在最坏的情况下，分配太多的可用内存会导致系统或设备全部或部分故障，程序崩溃，或者系统速度显著降低。

制作动画

JavaScript线程控制动画。想象场景过渡;新场景从右向左移动，从屏幕外开始。对于转换过程中的每一帧，JavaScript线程都必须向主线程发送一个新的x偏移量。如果JavaScript线程被锁定，它就无法做到这一点，因此该帧上不会发生更新，动画也会断断续续。

一种解决方案是将基于JavaScript的动画卸载到主线程。

缩短应用的启动时间

改善应用程序的启动时间是为了照顾对象。完成元素。终结器在单个线程上运行，因此其他所有对象都必须等到所有终结器都通过之后才能被垃圾回收。这造成了巨大的依赖性，导致应用程序启动时间缓慢。

导航会造成障碍

该程序的功能围绕着导航，所以你应该花更多的精力来增强它，增强JavaScript和原生元素之间的交互。因此，你可以使用这些导航功能。反应导航，导航仪，导航仪iOS，导航实验。

多线程加剧了这个问题

React Native不支持多线程。其他项目必须等到React Native中的初始元素完成渲染后才能继续。例如，在实现实时视频广播的同时实现实时聊天功能会涉及到性能问题。使用主线程来操作应用程序的业务逻辑，响应用户输入，并跟踪React本机性能测试的状态。

提高React本机应用性能的优势

React本地开发人员可以减少应用程序启动加载时间，用户可以在最终产品中“感受到”这一点。React Native在跨平台智能手机开发方面远远超过Flutter，因为它采用了新的改进架构。React native的新渲染系统fabric提高了导航、列表、手势处理等的性能。

将React Native中过时的组件(即AsyncStorage、WebView)从核心中移除，并将其转变为社区管理的存储库，这有助于React Native提高性能和灵活性。JS和本机代码之间的顺畅通信以及新的底层结构都提升了应用程序的性能。

结论

性能只是一个app的一个方面。选择一个解决方案还有很多其他原因，比如UI、代码可重用性、社区支持、前端支持、语言等等。选择最适合你并且更容易或更有趣的框架。