React Native 全栈开发实战班 - 性能与调试之内存管理

在移动应用中，内存管理 是确保应用稳定运行、避免内存泄漏和卡顿的关键环节。React Native 应用在内存管理方面面临着一些独特的挑战，例如 JavaScript 与原生模块的桥接、复杂的 UI 渲染等。本章节将详细介绍 React Native 中的内存管理，包括常见的内存问题、内存泄漏的检测与修复、内存优化技巧以及使用内存分析工具进行调试。

1.6.1 常见的内存问题

在 React Native 应用中，常见的内存问题主要包括：

  1. 内存泄漏:

    • 组件卸载后仍然持有对组件的引用，导致内存无法释放。
    • 事件监听器未及时移除，导致内存泄漏。
    • 未正确管理订阅和定时器。

  2. 内存膨胀:

    • 一次性加载大量数据或图片，导致内存占用过高。
    • 不合理的缓存策略，导致内存占用不断增加。

  3. 桥接内存问题:

    • JavaScript 与原生模块之间的频繁通信，导致内存占用增加。
1.6.2 内存泄漏的检测与修复
1.6.2.1 使用 Flipper 进行内存泄漏检测

Flipper 提供了内存分析工具，可以帮助开发者检测内存泄漏。

步骤：

  1. 打开 Flipper 并连接应用。
  2. 打开 Memory Plugin。
  3. 在应用中执行可能导致内存泄漏的操作，如打开和关闭页面、添加和移除事件监听器等。
  4. 观察 Memory Plugin 中的内存使用情况。
  5. 如果发现内存占用不断增加，可能存在内存泄漏。
  6. 使用 Memory Snapshot 功能，查看内存快照，分析内存泄漏的原因。

示例：

  1. 在 Flipper 中打开 Memory Plugin。
  2. 在应用中打开一个页面，执行一些操作，然后关闭页面。
  3. 观察 Memory Plugin，发现内存占用没有减少，说明可能存在内存泄漏。
  4. 使用 Memory Snapshot 功能，查看内存快照，分析内存泄漏的原因，例如未移除的事件监听器。
1.6.2.2 使用 Chrome DevTools 进行内存泄漏检测

React Native Debugger 集成了 Chrome DevTools，可以用于调试 React 组件和内存泄漏。

步骤：

  1. 打开 React Native Debugger。
  2. 启动 React Native 应用。
  3. 打开 Chrome DevTools。
  4. 切换到 Memory 面板。
  5. 点击 “Take snapshot” 按钮，生成内存快照。
  6. 重复执行可能导致内存泄漏的操作，并生成多个内存快照。
  7. 比较内存快照，分析内存泄漏的原因。

示例：

  1. 在 React Native Debugger 中打开 Chrome DevTools。
  2. 在应用中打开一个页面，执行一些操作，然后关闭页面。
  3. 在 Chrome DevTools 中生成内存快照。
  4. 重复打开和关闭页面，并生成多个内存快照。
  5. 比较内存快照，发现内存占用没有减少，说明可能存在内存泄漏。
  6. 通过分析内存快照，找到未移除的事件监听器或其他内存泄漏原因。
1.6.2.3 修复内存泄漏

以下是一些常见的内存泄漏问题及其修复方法：

  1. 未移除的事件监听器:

    问题: 在组件挂载时添加事件监听器，但在组件卸载时未移除，导致内存泄漏。

    解决方法: 在 useEffect Hook 的清理函数中移除事件监听器。

    示例：

    import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';const MyComponent = () => {useEffect(() => {const handleResize = () => {console.log('窗口大小变化');};window.addEventListener('resize', handleResize);return () => {window.removeEventListener('resize', handleResize);};}, []);return (<View style={styles.container}><Text>My Component</Text></View>);
};const styles = StyleSheet.create({container: {padding: 10,},
});export default MyComponent;

  2. 未清除的定时器:

    问题: 使用 setInterval 或 setTimeout 创建定时器，但在组件卸载时未清除，导致内存泄漏。

    解决方法: 在 useEffect Hook 的清理函数中清除定时器。

    示例：

    import React, { useEffect, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';const MyComponent = () => {const intervalRef = useRef(null);useEffect(() => {intervalRef.current = setInterval(() => {console.log('定时器触发');}, 1000);return () => {clearInterval(intervalRef.current);};}, []);return (<View style={styles.container}><Text>My Component</Text></View>);
};const styles = StyleSheet.create({container: {padding: 10,},
});export default MyComponent;

  3. 未释放的全局变量:

    问题: 将组件实例存储在全局变量中，导致内存泄漏。

    解决方法: 避免将组件实例存储在全局变量中，或者在组件卸载时将全局变量置为 null。

    示例:

    import React, { useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';window.myComponent = null;const MyComponent = () => {useEffect(() => {window.myComponent = this;return () => {window.myComponent = null;};}, []);return (<View style={styles.container}><Text>My Component</Text></View>);
};const styles = StyleSheet.create({container: {padding: 10,},
});export default MyComponent;
1.6.3 内存优化技巧

除了避免内存泄漏之外，合理的内存优化策略可以进一步提升应用的性能和稳定性。以下是一些常见的内存优化技巧：

1.6.3.1 避免一次性加载大量数据

一次性加载大量数据会导致内存占用过高，影响应用性能。以下是一些避免一次性加载大量数据的策略：

  1. 分页加载（Pagination）：

    对长列表或大量数据进行分页加载，每次只加载一部分数据。例如，在 FlatList 中使用 onEndReached 和 onEndReachedThreshold 属性实现分页加载。

    示例：

    import React, { useState, useEffect } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';const MyFlatList = () => {const [data, setData] = useState([]);const [page, setPage] = useState(1);const [loading, setLoading] = useState(false);const fetchData = async () => {setLoading(true);const response = await fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=20`);const json = await response.json();setData([...data, ...json]);setPage(page + 1);setLoading(false);};useEffect(() => {fetchData();}, []);const renderItem = ({ item }) => (<View style={styles.item}><Text>{item.title}</Text></View>);return (<FlatListdata={data}renderItem={renderItem}keyExtractor={(item) => item.id.toString()}onEndReached={fetchData}onEndReachedThreshold={0.5}ListFooterComponent={loading ? <Text>Loading...</Text> : null}/>);
};const styles = StyleSheet.create({item: {padding: 10,borderBottomWidth: 1,borderColor: '#ccc',},
});export default MyFlatList;

  2. 虚拟化列表（Virtualization）：

    使用 FlatList 或 SectionList 进行虚拟化渲染，只渲染当前可见区域的子组件，避免一次性渲染所有列表项。

    示例：

    import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';const MyVirtualizedList = () => {const data = Array.from({ length: 1000 }, (_, index) => ({ id: index.toString(), title: `Item ${index + 1}` }));const renderItem = ({ item }) => (<View style={styles.item}><Text>{item.title}</Text></View>);return (<FlatListdata={data}renderItem={renderItem}keyExtractor={(item) => item.id}initialNumToRender={10}maxToRenderPerBatch={10}windowSize={21}/>);
};const styles = StyleSheet.create({item: {padding: 10,borderBottomWidth: 1,borderColor: '#ccc',},
});export default MyVirtualizedList;
1.6.3.2 合理使用缓存

缓存可以提高数据读取速度，但不当的缓存策略会导致内存占用过高。以下是一些合理的缓存策略：

  1. 使用合适的缓存库:

    使用 react-query 或 SWR 等缓存库，可以更方便地管理缓存数据。

    示例：使用 react-query 进行数据缓存

    import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { QueryClient, QueryClientProvider, useQuery } from 'react-query';const queryClient = new QueryClient();const fetchData = async () => {const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');return response.json();
};const MyQueryComponent = () => {const { data, error, isLoading } = useQuery(['post'], fetchData, {staleTime: 5 * 60 * 1000, // 数据缓存时间});if (isLoading) return <Text>Loading...</Text>;if (error) return <Text>Error: {error.message}</Text>;return <Text style={styles.text}>{data.title}</Text>;
};const MyComponent = () => {return (<QueryClientProvider client={queryClient}><View style={styles.container}><MyQueryComponent /></View></QueryClientProvider>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,marginBottom: 10,},
});export default MyComponent;

  2. 缓存失效策略:

    设置合理的缓存失效时间，避免缓存数据过期或占用过多内存。

    示例:

    useQuery(['post'], fetchData, {staleTime: 5 * 60 * 1000, // 数据缓存时间cacheTime: 10 * 60 * 1000, // 缓存保留时间
});

  3. 缓存清理:

    定期清理缓存数据，避免内存占用不断增加。

    示例:

    import { useEffect } from 'react';
import { useQueryClient } from 'react-query';const MyComponent = () => {const queryClient = useQueryClient();useEffect(() => {const handleAppStateChange = (state) => {if (state === 'background') {queryClient.clear();}};AppState.addEventListener('change', handleAppStateChange);return () => {AppState.removeEventListener('change', handleAppStateChange);};}, []);return (<View style={styles.container}><Text>My Component</Text></View>);
};
1.6.3.3 优化图片资源

图片资源是移动应用中最常见的内存消耗来源之一，尤其是在包含大量图片或高分辨率图片的应用中。优化图片资源可以有效减少内存占用，提升应用性能。以下是一些常见的图片资源优化策略：

1.6.3.3.1 图片压缩

图片压缩是减少图片大小的有效方法，可以显著降低内存占用。常用的图片压缩工具包括：

  • ImageOptim: 适用于 macOS，可以批量压缩 PNG 和 JPEG 图片。
  • TinyPNG: 在线图片压缩工具，支持 PNG 和 JPEG 格式。
  • ImageMagick: 命令行工具，支持多种图片格式和压缩选项。

示例：使用 ImageOptim 压缩图片

  1. 下载并安装 ImageOptim.
  2. 打开 ImageOptim，将需要压缩的图片拖入应用。
  3. ImageOptim 会自动压缩图片并删除不必要的元数据。

示例：使用 TinyPNG 压缩图片

  1. 前往 TinyPNG 网站。
  2. 上传需要压缩的图片。
  3. 下载压缩后的图片。

示例：使用 ImageMagick 压缩图片

# 安装 ImageMagick
brew install imagemagick# 压缩图片
convert input.jpg -quality 80 output.jpg

解释：

  • -quality 80 参数将图片质量设置为 80%，可以显著减少图片大小。
1.6.3.3.2 使用合适的图片格式

选择合适的图片格式可以有效减少图片大小：

  • JPEG:
    • 适用于照片，压缩率高。
    • 不支持透明背景。
  • PNG:
    • 适用于需要透明背景的图片。
    • 文件大小较大。
  • WebP:
    • 压缩率高，支持有损和无损压缩。
    • 文件大小比 JPEG 和 PNG 更小。
    • 需要原生支持（React Native 默认支持 WebP）。

示例：使用 WebP 格式的图片

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';const WebPImageExample = () => {return (<View style={styles.container}><Imagesource={{ uri: 'https://example.com/image.webp' }}style={styles.image}resizeMode="cover"/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default WebPImageExample;

注意： 确保目标平台支持 WebP 格式。

1.6.3.3.3 图片懒加载

对于长列表或包含大量图片的页面，可以使用图片懒加载技术，避免一次性加载所有图片，从而减少内存占用。

使用 react-native-fast-image 实现图片懒加载:

react-native-fast-image 是一个高性能的图片加载库，支持图片缓存、占位图、懒加载等功能。

安装 react-native-fast-image:

npm install react-native-fast-image

示例：

import React from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';const images = ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg',// 更多图片
];const LazyLoadImageExample = () => {return (<FlatListdata={images}renderItem={({ item }) => (<FastImagestyle={styles.image}source={{ uri: item }}resizeMode={FastImage.resizeMode.cover}defaultSource={require('./assets/images/placeholder.png')}/>)}keyExtractor={(item) => item}// 其他 FlatList 属性/>);
};const styles = StyleSheet.create({image: {width: 300,height: 300,margin: 10,},
});export default LazyLoadImageExample;

解释：

  • react-native-fast-image 会在图片进入可视区域时加载图片。
  • defaultSource 属性用于设置占位图。

使用 react-native-lazyload 实现图片懒加载:

react-native-lazyload 是另一个流行的图片懒加载库。

安装 react-native-lazyload:

npm install react-native-lazyload

示例：

import React from 'react';
import { View, FlatList, StyleSheet } from 'react-native';
import { LazyloadImage } from 'react-native-lazyload';const images = ['https://example.com/image1.jpg','https://example.com/image2.jpg','https://example.com/image3.jpg',// 更多图片
];const LazyLoadImageExample = () => {return (<FlatListdata={images}renderItem={({ item }) => (<LazyloadImagestyle={styles.image}source={{ uri: item }}resizeMode="cover"defaultSource={require('./assets/images/placeholder.png')}/>)}keyExtractor={(item) => item}// 其他 FlatList 属性/>);
};const styles = StyleSheet.create({image: {width: 300,height: 300,margin: 10,},
});export default LazyLoadImageExample;

解释：

  • LazyloadImage 组件会在图片进入可视区域时加载图片。
  • defaultSource 属性用于设置占位图。
1.6.3.3.4 图片缓存

合理使用图片缓存可以减少网络请求次数，提高图片加载速度。

使用 react-native-fast-image 的缓存功能:

react-native-fast-image 支持内存缓存和磁盘缓存，可以通过 cache 属性设置缓存策略。

示例：

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';
import FastImage from 'react-native-fast-image';const CachedImageExample = () => {return (<View style={styles.container}><FastImagestyle={styles.image}source={{uri: 'https://example.com/image.png',priority: FastImage.priority.normal,cache: FastImage.cacheControl.web,}}resizeMode={FastImage.resizeMode.cover}/></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',},image: {width: 200,height: 200,borderRadius: 10,},
});export default CachedImageExample;

解释：

  • cache: FastImage.cacheControl.web 设置图片缓存策略为 Web 缓存（默认）。
  • react-native-fast-image 会自动缓存图片到内存和磁盘。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/19503.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

java语言输入两个整数a，b，输出a/b的值，只保留整数部分

java语言输入两个整数a，b，输出a/b的值，只保留整数部分

除法取整用强制转换int number (int) c;
阅读更多...
【MySQL系列】深入理解MySQL中的存储、排序字符集

【MySQL系列】深入理解MySQL中的存储、排序字符集

前言 在创建数据库时&#xff0c;我们经常会需要填写数据库的所用字符集、排序规则&#xff0c;字符集和排序规则是两个非常重要的概念&#xff0c;它们决定了数据库如何存储和比较字符串数据。在 MySQL 中&#xff0c;常用的存储字符集有 utf8、utf8mb4&#xff0c;而排序字符…
阅读更多...
tcp 超时计时器

tcp 超时计时器

在 TCP&#xff08;传输控制协议&#xff09;中有以下四种重要的计时器&#xff1a; 重传计时器&#xff08;Retransmission Timer&#xff09; 作用&#xff1a;用于处理数据包丢失的情况。当发送方发送一个数据段后&#xff0c;就会启动重传计时器。如果在计时器超时之前没有…
阅读更多...
Docker部署ES7.9.3单节点

Docker部署ES7.9.3单节点

Elasticsearch&#xff08;简称ES&#xff09;是一个分布式、可扩展、实时的搜索与数据分析引擎&#xff01; Elasticsearch位于Elastic Stack核心&#xff0c;为所有类型的数据提供近乎实时的搜索和分析。无论是结构化或非结构化文本、数字数据还是地理空间数据&#xff0c;El…
阅读更多...
ChromeDriver驱动下载地址更新（保持最新最全）

ChromeDriver驱动下载地址更新（保持最新最全）

说明&#xff1a; ChromeDriver 是 Selenium WebDriver 用于控制 Chrome 的独立可执行文件。 为了方便下载使用&#xff0c;本文保持ChromeDriver的最新版本更新&#xff0c;并提供115.0.5763.0-133.0.6841.0版本的下载地址&#xff1a; 所有版本和下载地址&#xff1a; &am…
阅读更多...
CSS：高级寄巧

CSS：高级寄巧

精灵图 为什么需要精灵图呢&#xff1f; 一个网页中往往会应用很多小背景图作为修饰&#xff0c;当网页中的图像过多时&#xff0c;服务器就会频繁地接收和发送 请求图片&#xff0c;造成服务器请求压力过大&#xff0c;这将大大降低页面的加载速度。 因此&#xff0c;为了有…
阅读更多...
linux002.虚拟机中ubuntu容量不够，新增容量合并的方法

linux002.虚拟机中ubuntu容量不够，新增容量合并的方法

新增容量合并方法
阅读更多...
AutosarMCAL开发——基于EB DsAdc驱动

AutosarMCAL开发——基于EB DsAdc驱动

目录 一、旋转变压器与DsAdc原理1.常见电机角度反馈方式2.可变磁阻旋变工作原理3.使用TC3XX EDSADC进行旋变软解码 二、EB配置1.载波输出2.通道配置3.调制器4.滤波链路5.整流6.积分 三、Mcal接口应用1.AUtosar标准API接口2.应用步骤 四、总结 一、旋转变压器与DsAdc原理 1.常见…
阅读更多...
web应用安全和信息泄露预防

web应用安全和信息泄露预防

文章目录 1&#xff1a;spring actuator导致的信息泄露1.1、Endpoint配置启用检测1.2、信息泄露复现1.3、防御 2&#xff1a;服务端口的合理使用3&#xff1a;弱口令&#xff08;密码&#xff09;管理4&#xff1a;服务端攻击4.1、短信业务&#xff0c;文件上传等资源型接口1、…
阅读更多...
C语言：链表

C语言：链表

链表是一种常见的线性数据结构&#xff0c;其中每个元素&#xff08;称为节点&#xff09;包含两部分&#xff1a;数据和指向下一个节点的指针。链表的主要优点是插入和删除操作的时间复杂度较低&#xff0c;但随机访问的效率不如数组。 1. 链表的基本概念 节点&#xff08;N…
阅读更多...
webpack配置

webpack配置

4-3vue-loader测试_哔哩哔哩_bilibili 一.新建文件夹vue_todo&#xff0c;vscode打开 二.ctrl打开终端&#xff0c;输入npm init -y&#xff0c;快速生成一个默认的package.json文件 之后左边出现项目初始化文件package.json 三.接下来需要webpack完成打包&#xff0c;所以安装…
阅读更多...
字节跳动辞退103人

字节跳动辞退103人

大家好&#xff0c;我是程序员面试刷题平台的鸭鸭&#xff01; 在前阵子实习生破坏大模型训练事件之后&#xff0c;字节又上了一次热搜。 鸭鸭吃完瓜&#xff0c;只能说&#xff0c;社会险恶啊同学们&#xff01; 5 号&#xff0c;字节跳动内部发布了年内第四份《企业纪律与职…
阅读更多...
大型语言模型综述 A Survey of Large Language Models

大型语言模型综述 A Survey of Large Language Models

文章源自 2303.18223 (arxiv.org) 如有侵权&#xff0c;请通知下线 这是一篇关于大语言模型&#xff08;LLMs&#xff09;的综述论文&#xff0c;主要介绍了 LLMs 的发展历程、技术架构、训练方法、应用领域以及面临的挑战等方面&#xff0c;具体内容如下&#xff1a; 摘要…
阅读更多...
服务器作业4

服务器作业4

[rootlocalhost day04]# vim 10.sh [rootlocalhost day04]# cat 10.sh #通过shell脚本分析部署nginx网络服务 #1.接收用户部署的服务名称 read -p "服务名称:(nginx)" server if [ $server ! nginx ];then echo "输入的不是nginx,脚本退出" exit 1…
阅读更多...
Linux基础（二十）——程序管理与 SELinux 初探

Linux基础（二十）——程序管理与 SELinux 初探

程序管理与 SELinux 初探 1. 程序和进程2.程序调用流程3. 一个bash中的多任务工作管理4.进程管理4.1 查询进程4.2 进程的执行顺序 5.系统资源的观察6. /proc/* 代表的意义7.SELinux 1. 程序和进程 2.程序调用流程 程序与进程之间的关系&#xff1a; 从上图可以看出&#xff0…
阅读更多...
vue3 路由写法及传参方式 !超详细

vue3 路由写法及传参方式 !超详细

Vue Router 是 Vue.js 官方的路由管理器。它主要用于单页面应用程序&#xff08;SPA, Single Page Application&#xff09;中&#xff0c;帮助解决页面导航、组件复用等问题。 基本的使用 1.router配置文件代码 创建一个ts文件,用来写路由器 // 创建一个路由器,并暴露出去 …
阅读更多...
MATLAB绘制正四面体、正六面体

MATLAB绘制正四面体、正六面体

MATLAB绘制正四面体、正六面体 clc;close all;clear all;warning off;% clear all rand(seed, 100); randn(seed, 100); format long g;% 正四面体&#xff08;Tetrahedron&#xff09; % 顶点坐标&#xff08;正四面体的顶点位于一个正方体的对角线上&#xff0c;并经过适当缩…
阅读更多...
一文了解 inductive bias（归纳偏好）

一文了解 inductive bias（归纳偏好）

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 归纳偏好&#xff08;Inductive Bias&#xff09;是机器学习中的一个非常基础但又非常重要的概念。为了更好地理解它&#xff0c;我们先从 “归纳” 和 “偏好” 这两个词开始讲解。 什么是归纳&#x…
阅读更多...
leetcode844:比较含退格的字符串

leetcode844:比较含退格的字符串

题干 题目分析 两个字符串要进行比较&#xff0c;#代表着回车&#xff0c;也就是删除之前的字符。 若按照遍历的惯例&#xff0c;选择从前到后遍历&#xff0c;但这样没法判断&#xff0c;因为#之前被删除的部分是不需要相同的。 因此考虑到#的含义&#xff0c;我们应该选择从…
阅读更多...
【Python爬虫实战】从入门到精通：全面解析IP代理池的原理与实战应用

【Python爬虫实战】从入门到精通：全面解析IP代理池的原理与实战应用

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、IP代理池 &#xff08;一&#xff09;基本概念 &#xff08;二&#xff09;主要功能 &#xff08;三…
阅读更多...
最新文章

Copyright @ 2022~2023