超级会员免费看
React Native性能优化与异常处理全解析
1. FlatList性能优化
在处理列表渲染时，FlatList的性能优化至关重要。以下是一些优化建议：
-
预计算条目高度
：使用
getItemLayout
来预计算每个条目的高度，这样列表就无需在渲染时进行计算，从而提高性能。
-
使用图像缓存
：推荐使用
react-native-fast-image
等图像缓存库，减少图像加载时间。
此外，还有一些高级优化技巧，需要对FlatList的渲染行为进行微调：
| 参数 | 描述 |
| ---- | ---- |
|
initialNumToRender
| 定义初始渲染的条目数量，这些条目在FlatList的生命周期内不会被卸载。 |
|
windowSize
| 定义需要渲染条目的窗口区域。 |
|
maxToRenderPerBatch
和
updateCellsBatchingPeriod
| 这两个参数用于控制渲染批次的大小和频率。小批次和较长的批处理周期可以提供更好的TTI（首次交互时间），而大批次和较短的批处理周期可以避免空白区域。这需要在两者之间进行权衡。 |
2. 列表条目基础优化
对列表条目进行基本优化，主要包括添加键和应用
shouldComponentUpdate
。
2.1 添加键
为列表条目添加键可以避免警告信息。可以使用FlatList的内置
keyExtractor
属性，将
feed ID
作为键。示例代码如下：
<FlatList
...
keyExtractor={(item) => item.feed.id}
...
/>
这样可以消除以下警告信息：
ManyFaces[19949:1694125] [javascript] Warning: Each child in a
list should have a unique "key" prop.
Check the render method of `VirtualizedList`. See https://
fb.me/react-warning-keys for more information.
2.2 应用
shouldComponentUpdate
为所有
Feeds
组件实现
shouldComponentUpdate
，避免不必要的差异算法运行。由于
Feeds
组件被高阶组件（HOC）封装，无法使用纯组件。所有
Feeds
组件都监听
item
属性，因此可以通过比较
item
属性来确定是否需要更新。示例代码如下：
export default function withMetaAndControls(Feed) {
class ElemComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if (nextProps.item === this.props.item) {
return false;
}
return true;
}
render() {
return (
...
);
}
like = () => {
this.props.like(this.props.feedIndex);
}
...
}
}
这样，只有当传入的
item
属性发生变化时，才会更新
Feeds
组件，提高性能。例如，当用户点赞一个
Feed
时，只有被点赞的组件的
render()
方法会被调用，而不是所有组件的
render()
方法都被调用。
3. 异常处理设计
异常处理在系统设计中至关重要，它可以帮助开发者早期发现和处理错误，避免应用在用户面前崩溃。
3.1 异常处理原则
开发者需要明确异常处理的需求，包括：
- 所有异常都应被正确导向预期的位置，避免异常被抛到任意上层调用栈或未被捕获而导致应用崩溃。
- 可恢复的异常应被静默处理，对用户透明。
- 不可恢复的异常应定义明确的行为和UI展示，向用户表达歉意。
- 记录所有意外的逻辑流程，包括可恢复和不可恢复的异常。
- 了解应用在实际运行中崩溃时的具体情况，以便高效修复并准确报告问题。
3.2 异常分类及处理原则
异常可以从四个维度进行分类，并遵循相应的处理原则：
| 分类维度 | 类型 | 处理原则 |
| ---- | ---- | ---- |
| 严重程度 | 可恢复异常 | 应用“静默日志”技术，记录异常但保持用户体验流畅。 |
| 严重程度 | 不可恢复异常 | 抛出到UI层，向用户提供反馈，如显示“出错了”页面、弹出提示框或重置状态并返回登录页面。 |
| 可控性 | 可控异常 | 记录所有必要信息。 |
| 可控性 | 不可控异常 | 尽力将其转换为可控异常，通过细致的日志记录实现。 |
| 来源 | 外部异常 | 可以引入“重试”逻辑来缓解，通常内部异常不进行重试。 |
| 范围 | 全局异常 | 作为所有本地异常处理程序失败后的最后手段，只能由全局处理程序处理。 |
3.3 JavaScript异常处理优势
JavaScript具有内在优势，与大多数其他编程语言（如C++和Objective-C）不同，JavaScript可以将所有异常本地化，即所有异常（包括空指针异常）都可以使用
catch
块或错误边界捕获。
4. 软件架构中的健壮性设计
为了正确设计异常处理机制，需要定义两个关键要点：入口点和崩溃点。
4.1 入口点
入口点是接收和处理外部数据的地方，在React Native中主要有两个位置：从服务器端接收数据和从原生层传递数据到JavaScript层。在处理这些数据时，需要进行空检查、优雅回退并在必要时抛出异常。具体处理方式如下：
-
可选字段为空
：这是逻辑流程而非异常流程，因为没有违反协议。可以简单地为字段提供默认值作为回退。
-
必填字段为空
：此时协议被破坏，应设置默认值并记录日志，秘密恢复以不打扰用户。
-
关键字段为空
：不仅协议被破坏，而且缺失的字段属于关键路径，用户体验无法继续。在这种情况下，应立即抛出异常，由UI层处理。
4.2 崩溃点
需要特别注意空指针异常和越界异常，这些异常可能发生在组件、全局函数和原生层。处理异常时，要明确可恢复和不可恢复异常，只在关键路径上抛出不可恢复异常，其他非关键逻辑中的异常应作为可恢复异常处理，并由各自的模块处理。对于全局函数，建议不要将关键路径放在其中，所有异常应在内部处理。
5. 全局错误处理
即使有完全防御性的代码，异常仍可能发生。这些异常应被视为失败，只能由全局错误处理程序处理。主要有三种全局错误处理方式：
- 使用包裹应用根组件的错误边界，显示“出错了”页面。
- 安装
RCTExceptionManager
并绑定委托。
- 使用
react-native-exception-handler
。
全局处理程序可以用于执行崩溃报告等任务，但最好在开发和测试阶段尽早发现并解决这些问题。
6. 原生模块解析
原生模块的目的是导出原生功能，使原生编写的函数可以注入到JavaScript运行时并直接被JavaScript代码使用。调用原生模块的方法会被转换为通过桥接发送的消息。过去，跨桥接传递的参数需要序列化和反序列化，这会带来性能损失。基于JSI的优化消除了这种需求。
原生模块的初始化流程大致分为三个阶段：预启动、启动和JavaScript层初始化。
6.1 阶段0：预启动
原生模块的初始化从宏
RCT_EXTERN_MODULE
开始，它会应用另外两个宏
RCT_EXTERN_REMAP_MODULE
和
RCT_EXPORT_MODULE_NO_LOAD
，最终将模块类填充到
RCTModuleClasses
中，用于后续实例化原生模块实例。示例代码如下：
#define RCT_EXTERN_MODULE(objc_name, objc_supername)
RCT_EXTERN_REMAP_MODULE(, objc_name, objc_supername)
#define RCT_EXTERN_REMAP_MODULE(
js_name, objc_name, objc_supername)
objc_name:
objc_supername @
end @interface objc_name(RCTExternModule)<RCTBridgeModule>
@end
@implementation objc_name (RCTExternModule)
RCT_EXPORT_MODULE_NO_LOAD(js_name, objc_name)
#define RCT_EXPORT_MODULE_NO_LOAD(js_name, objc_name)
RCT_EXTERN void RCTRegisterModule(Class);
+(NSString *)moduleName
{
return @ #js_name;
}
__attribute__((constructor))
static void RCT_CONCAT(initialize_,
objc_name)()
{
RCTRegisterModule([objc_name class]);
}
此阶段的主要步骤包括：
1. 使用传入的模块名定义
@interface
。
2. 紧接着定义
@implementation
。
3. 实现
moduleName
，相当于Android原生模块实现中的
getName()
。
4. 使用
__attribute__((constructor))
在其他操作之前进行模块注册。
5. 调用
RCTRegisterModule
注册模块。
RCT_EXTERN_MODULE
主要用于基于Swift的原生模块，对于普通的Objective-C，可以使用更简单的
RCT_EXPORT_MODULE
实现相同的功能。
最后，来看
RCTRegisterModule
的实现：
void RCTRegisterModule(Class moduleClass)
{
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
...
});
}
综上所述，通过对FlatList性能优化、列表条目基础优化、异常处理设计、软件架构健壮性设计、全局错误处理和原生模块解析等方面的探讨，可以提高React Native应用的性能和稳定性，为用户提供更好的体验。同时，开发者应具备深入解决生产阶段问题的能力和设计具有弹性系统的能力，以实现零崩溃的应用目标。
React Native性能优化与异常处理全解析（续）
7. 原生模块初始化流程可视化
为了更清晰地理解原生模块的初始化流程，我们可以使用mermaid格式的流程图来展示。以下是原生模块从预启动到JavaScript层初始化的整体流程：
graph LR
classDef startend fill:#F5EBFF,stroke:#BE8FED,stroke-width:2px;
classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;
A([开始]):::startend --> B(RCT_EXTERN_MODULE):::process
B --> C(RCT_EXTERN_REMAP_MODULE):::process
C --> D(RCT_EXPORT_MODULE_NO_LOAD):::process
D --> E(RCTRegisterModule):::process
E --> F(RCTModuleClasses填充):::process
F --> G(预启动完成):::process
G --> H(启动阶段):::process
H --> I(JavaScript层初始化):::process
I --> J([结束]):::startend
这个流程图展示了原生模块初始化的主要步骤，从宏的调用到模块的注册，再到不同阶段的完成，最后进入JavaScript层的初始化。
8. 性能优化与异常处理的综合应用
在实际开发中，性能优化和异常处理通常是相互关联的。例如，在进行FlatList性能优化时，如果出现异常，可能会影响列表的正常渲染。因此，我们需要将性能优化和异常处理策略结合起来。
以下是一个综合应用的示例，展示了如何在FlatList性能优化的同时处理可能出现的异常：
import React, { Component } from 'react';
import { FlatList } from 'react-native';
import FastImage from 'react-native-fast-image';
class OptimizedFlatList extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
error: null
};
}
componentDidMount() {
try {
// 模拟获取数据
const data = this.fetchData();
this.setState({ data });
} catch (error) {
this.setState({ error });
}
}
fetchData() {
// 这里可以是实际的数据请求逻辑
// 为了示例，我们返回一个简单的数组
return [
{ id: 1, feed: { id: 'feed1', imageUrl: 'https://example.com/image1.jpg' } },
{ id: 2, feed: { id: 'feed2', imageUrl: 'https://example.com/image2.jpg' } },
// 更多数据...
];
}
renderItem = ({ item }) => {
return (
<FastImage
source={{ uri: item.feed.imageUrl }}
style={{ width: 100, height: 100 }}
/>
);
};
keyExtractor = (item) => item.feed.id;
getItemLayout = (data, index) => ({
length: 100,
offset: 100 * index,
index
});
render() {
const { data, error } = this.state;
if (error) {
return <Text>Error: {error.message}</Text>;
}
return (
<FlatList
data={data}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
getItemLayout={this.getItemLayout}
initialNumToRender={3}
windowSize={5}
maxToRenderPerBatch={2}
updateCellsBatchingPeriod={100}
/>
);
}
}
export default OptimizedFlatList;
在这个示例中，我们创建了一个名为
OptimizedFlatList
的组件，它结合了FlatList的性能优化技巧（如
getItemLayout
、
keyExtractor
等）和异常处理。在
componentDidMount
方法中，我们尝试获取数据，如果出现异常，将错误信息存储在状态中并在渲染时显示错误信息。
9. 总结与最佳实践
通过前面的讨论，我们可以总结出以下React Native开发中的最佳实践：
| 类别 | 最佳实践 |
|---|---|
| 性能优化 |
- 使用
getItemLayout
预计算条目高度，减少列表渲染时的计算量。
- 采用图像缓存库（如
react-native-fast-image
）优化图像加载。
- 合理调整
initialNumToRender
、
windowSize
、
maxToRenderPerBatch
和
updateCellsBatchingPeriod
等参数，平衡性能和用户体验。
- 为列表条目添加唯一键，避免警告信息。 - 实现
shouldComponentUpdate
，避免不必要的渲染。
|
| 异常处理 |
- 明确异常处理的原则，包括异常导向、可恢复与不可恢复异常的处理、日志记录等。
- 对异常进行分类（严重程度、可控性、来源、范围），并遵循相应的处理原则。 - 在软件架构中定义入口点和崩溃点，进行严格的数据检查和异常处理。 - 使用全局错误处理程序处理未被捕获的异常。 |
| 原生模块 |
- 理解原生模块的初始化流程，包括宏的使用和模块注册。
- 利用基于JSI的优化，减少跨桥接传递参数的性能损失。 |
遵循这些最佳实践，可以显著提高React Native应用的性能和稳定性，减少崩溃的发生，为用户提供流畅的使用体验。
10. 未来展望
随着React Native技术的不断发展，性能优化和异常处理的方法也会不断更新和完善。例如，未来可能会有更高效的图像缓存策略、更智能的异常处理机制以及更简洁的原生模块交互方式。开发者需要持续关注技术的发展趋势，不断学习和应用新的技术，以保持应用的竞争力。
同时，用户对应用的性能和稳定性要求也越来越高。开发者需要在开发过程中更加注重细节，从性能优化和异常处理等多个方面入手，打造高质量的React Native应用。只有这样，才能满足用户的需求，在激烈的市场竞争中脱颖而出。
总之，React Native开发中的性能优化和异常处理是一个持续的过程，需要开发者不断探索和实践。通过合理应用各种技术和策略，我们可以实现零崩溃、高性能的React Native应用，为用户带来卓越的体验。
扫一扫
1489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
