ios react

by Jignesh Kakadiya

通过Jignesh Kakadiya

查找内存泄漏React本机应用程序(iOS) (Finding memory leaks react-native app (iOS))

Problem:Our react-native app was working well on all devices and except iPhone 6 it was resulting in a crash. After high level profiling we found out that its a memory issue. While using some heavy features in the app memory was shooting up to 600+ MB. And since iPhone 6 has 1GB of ram, iPhone automatically kills the app.

问题：我们的本机应用程序在所有设备上均运行良好，并且除iPhone 6外，它均导致崩溃。 经过高级分析后，我们发现这是一个内存问题。 在应用程序中使用一些繁重的功能时，内存最大可存储600 MB以上的内存。 而且由于iPhone 6具有1GB的内存，iPhone会自动终止该应用程序。

Solution:This is what I did to reduce app total memory usage from 600MB to 60MB.

解决方案：这是我将应用程序的总内存使用量从600MB减少到60MB的工作。

1. While profiling for memory leaks we need to make sure app is built with the release Scheme. Since dev build includes logging/warning, hot reloading features we don’t need them when checking for leaks. This is how you can change the release build with xcode.

   在分析内存泄漏时，我们需要确保应用程序是使用发布方案构建的。 由于开发版本包含日志记录/警告和热重载功能，因此在检查泄漏时不需要它们。 这就是您可以使用xcode更改发行版的方法 。

2. Start tracking for leaks

   开始跟踪泄漏

   Go to XCode → Product → Profile (⌘ + i)

   转到XCode→产品→配置文件(⌘+ i)

   It will popup profiling templates. Please select whichever is required.

   它将弹出分析模板。 请选择所需的内容。

   Select

   选择

   Leaksand click on choose.

   Leaks并单击choose 。

3. This should open the leaks profiler on your screen. Then you can click on the `red dot` on top left corner which will restart the app in simulator and you can start playing with the app.

3.这将在屏幕上打开泄漏分析器。 然后，您可以单击左上角的“红点”，这将在模拟器中重新启动该应用程序，然后您就可以开始使用该应用程序了。

4. This is how it looks after performing some swipes in the screen and carousel operations. I realised when I jump into the carousel screen and select an image from carousel of 12 images, memory shoots up for every single image. Result below shows us the memory taken by “in memory” image objects.

4.这是在屏幕上进行一些滑动和轮播操作后的外观。 我意识到，当我跳入轮播屏幕并从12个图像的轮播中选择一个图像时，每张图像都会增加内存。 以下结果向我们展示了“内存中”图像对象占用的内存。

5. Finding the cause.We were using the react-native-fast-image package for caching the images on that screen and since react-native doesn’t have a “better” way to cache fetched images we ended up using react-native-fast-image. So I decided to remove this wonderful package from my app, and result was shocking. This is what the result looks like after removing it.

5. 查找原因。 我们使用react-native-fast-image包在该屏幕上缓存图像，由于react-native并没有“更好”的方式来缓存获取的图像，因此我们最终使用了react-native-fast-image 。 因此，我决定从我的应用程序中删除此精美的程序包，结果令人震惊。 这是删除后的结果。

PS: Just so you know we ended up using react-native-cached-image, which doesn’t store image in memory.

PS：如此您就知道我们最终使用了react-native-cached-image ，它不将图像存储在内存中。

If you are building something with react-native and need help. Please let me know.

如果您要使用本机构建东西，并且需要帮助。 请告诉我。

翻译自: https://www.freecodecamp.org/news/finding-memory-leaks-react-native-app-ios-46e6eeb50c8c/

ios react