1. 项目背景与需求分析在医药零售行业数字化转型过程中一个长期存在的技术痛点是如何高效管理药品与多药店之间的复杂关联关系。传统解决方案通常采用关系型数据库的表连接方式但这在移动端应用场景下会面临性能瓶颈和开发效率问题。我们最近在开发一个医药零售管理系统时遇到了这样的典型场景单个药品可能同时存在于多个门店每个门店对同一药品可能有不同的库存、价格和销售策略需要支持快速查询某药品在所有门店的分布情况同时也要能查看某门店的所有药品信息这种多对多的关联关系如果采用传统方案在React Native跨鸿蒙平台开发中会遇到几个棘手问题频繁的网络请求导致性能低下不同平台的数据解析逻辑不一致开发复杂度高维护困难2. 技术选型与架构设计2.1 为什么选择嵌套数组结构经过多次技术论证我们最终采用了JS原生嵌套数组结构作为核心数据模型主要基于以下考量性能优势一次请求即可获取完整数据关系客户端本地解析减少网络交互鸿蒙和React Native都能高效处理JSON数据开发效率前端开发者熟悉的JS语法无需编写平台特定解析代码调试方便console.log直接查看数据结构数据结构示例const pharmacyData [ { pharmacyId: P001, pharmacyName: 中心大药房, drugs: [ { drugId: D001, stock: 50, price: 28.5 }, // 其他药品... ] }, // 其他药店... ]2.2 跨平台兼容性设计为了实现React Native与鸿蒙平台的完美兼容我们在架构设计上做了以下关键决策数据协议层统一使用JSON作为数据传输格式严格定义字段类型和结构添加版本控制字段应对未来变更业务逻辑层核心业务逻辑用纯JavaScript实现避免使用平台特定的API关键算法进行单元测试平台适配层React Native侧使用标准组件鸿蒙侧通过JS引擎直接解析平台特定功能通过抽象接口实现3. 核心实现细节3.1 嵌套数组的数据结构设计药品-药店关联关系的核心数据结构采用了三级嵌套设计药店列表最外层数组包含所有药店信息药品子集每个药店对象包含该店的药品数组药品详情每个药品对象包含具体属性// 完整数据结构示例 const data [ { pharmacyId: P001, name: 健康药店, location: 北京市朝阳区, drugs: [ { drugId: D001, name: 阿莫西林胶囊, specification: 0.25g*24粒, stock: 100, price: 15.8, discount: 0.9 }, // 更多药品... ] }, // 更多药店... ]3.2 React Native侧实现在React Native侧我们主要解决了以下几个技术难点数据加载与缓存// 使用React Query管理数据状态 const { data, isLoading } useQuery(pharmacyData, () fetch(/api/pharmacy-drugs).then(res res.json()) );列表性能优化// 使用FlatList实现高效渲染 FlatList data{pharmacyData} keyExtractor{item item.pharmacyId} renderItem{({item}) ( PharmacyCard pharmacy{item} onPress{() navigation.navigate(DrugList, {drugs: item.drugs})} / )} /复杂查询处理// 查找特定药品在所有药店中的分布 function findDrugDistribution(drugId) { return pharmacyData.map(pharmacy { const drug pharmacy.drugs.find(d d.drugId drugId); return drug ? {...drug, pharmacyName: pharmacy.name} : null; }).filter(Boolean); }3.3 鸿蒙端适配方案鸿蒙平台通过内置的JavaScript引擎直接解析相同的JSON数据结构关键实现点包括数据解析// 鸿蒙JS侧代码 export default { data: { pharmacyData: [] }, onInit() { // 从Native获取数据 const data requireNativeModule(DataModule).getPharmacyData(); this.pharmacyData JSON.parse(data); } }UI渲染// 鸿蒙的hml模板 list list-item for{{pharmacyData}} typepharmacy div classpharmacy-item text{{$item.name}}/text list list-item for{{$item.drugs}} typedrug text{{$item.name}} - 库存:{{$item.stock}}/text /list-item /list /div /list-item /list4. 性能优化与实践经验4.1 数据结构优化技巧在实际项目中我们发现当数据量较大时超过1000家药店每家药店数百种药品需要特别考虑性能问题。以下是几个有效的优化手段数据分片加载// 分批加载药店数据 async function loadPharmacyDataBatch(batchSize, lastId) { const response await fetch( /api/pharmacy-data?limit${batchSize}after${lastId} ); return response.json(); }内存优化使用数字ID代替字符串ID对重复的药品名称使用引用压缩传输数据服务端启用gzip本地缓存策略// 使用React Native的AsyncStorage缓存数据 const cacheData async (data) { try { await AsyncStorage.setItem( pharmacyDataCache, JSON.stringify(data) ); } catch (e) { console.error(缓存失败, e); } };4.2 跨平台调试技巧在开发过程中我们总结了以下调试经验数据结构验证工具// 开发环境下的数据校验 if (__DEV__) { validatePharmacyDataSchema(pharmacyData); }性能分析React Native使用Performance Monitor鸿蒙使用HiDebug工具关键操作添加时间戳日志错误边界处理// React Native错误边界组件 class ErrorBoundary extends React.Component { componentDidCatch(error, info) { logErrorToService(error, info); } render() { return this.props.children; } }4.3 实际踩坑记录在项目开发过程中我们遇到了几个典型问题及解决方案问题1鸿蒙端数组解析异常现象某些嵌套层级的数据无法正确渲染原因鸿蒙JS引擎对深度嵌套对象的处理有差异解决将数据层级控制在3层以内过深的结构进行扁平化处理问题2React Native列表卡顿现象药店列表滚动时有明显卡顿解决// 优化方案 FlatList initialNumToRender{10} maxToRenderPerBatch{5} windowSize{7} // 其他优化参数... /问题3数据同步冲突场景多端同时修改药品库存方案实现乐观UI更新后端校验function updateStock(drugId, newStock) { // 乐观更新 setLocalData(prev /*...*/); // 实际请求 api.updateStock(drugId, newStock).catch(() { // 回滚本地更改 }); }5. 扩展应用与未来优化当前方案已经稳定运行在多个医药零售项目中但仍有改进空间数据类型扩展添加药品图片等多媒体数据支持药品分类的多级树形结构引入时间序列数据记录价格变动性能进阶优化考虑使用Protocol Buffers替代JSON实现增量数据更新机制探索SQLite本地缓存方案开发体验提升自动生成TypeScript类型定义开发可视化数据结构编辑器完善Mock数据生成工具实践证明基于React Native和鸿蒙的嵌套数组方案在医药零售领域具有显著优势。它不仅解决了跨平台开发的核心痛点还通过简洁的数据结构实现了高性能的业务场景支持。这种架构思路同样适用于其他需要处理复杂关联关系的领域如电商、物流等行业的移动应用开发。
1. 项目背景与需求分析在医药零售行业数字化转型过程中一个长期存在的技术痛点是如何高效管理药品与多药店之间的复杂关联关系。传统解决方案通常采用关系型数据库的表连接方式但这在移动端应用场景下会面临性能瓶颈和开发效率问题。我们最近在开发一个医药零售管理系统时遇到了这样的典型场景单个药品可能同时存在于多个门店每个门店对同一药品可能有不同的库存、价格和销售策略需要支持快速查询某药品在所有门店的分布情况同时也要能查看某门店的所有药品信息这种多对多的关联关系如果采用传统方案在React Native跨鸿蒙平台开发中会遇到几个棘手问题频繁的网络请求导致性能低下不同平台的数据解析逻辑不一致开发复杂度高维护困难2. 技术选型与架构设计2.1 为什么选择嵌套数组结构经过多次技术论证我们最终采用了JS原生嵌套数组结构作为核心数据模型主要基于以下考量性能优势一次请求即可获取完整数据关系客户端本地解析减少网络交互鸿蒙和React Native都能高效处理JSON数据开发效率前端开发者熟悉的JS语法无需编写平台特定解析代码调试方便console.log直接查看数据结构数据结构示例const pharmacyData [ { pharmacyId: P001, pharmacyName: 中心大药房, drugs: [ { drugId: D001, stock: 50, price: 28.5 }, // 其他药品... ] }, // 其他药店... ]2.2 跨平台兼容性设计为了实现React Native与鸿蒙平台的完美兼容我们在架构设计上做了以下关键决策数据协议层统一使用JSON作为数据传输格式严格定义字段类型和结构添加版本控制字段应对未来变更业务逻辑层核心业务逻辑用纯JavaScript实现避免使用平台特定的API关键算法进行单元测试平台适配层React Native侧使用标准组件鸿蒙侧通过JS引擎直接解析平台特定功能通过抽象接口实现3. 核心实现细节3.1 嵌套数组的数据结构设计药品-药店关联关系的核心数据结构采用了三级嵌套设计药店列表最外层数组包含所有药店信息药品子集每个药店对象包含该店的药品数组药品详情每个药品对象包含具体属性// 完整数据结构示例 const data [ { pharmacyId: P001, name: 健康药店, location: 北京市朝阳区, drugs: [ { drugId: D001, name: 阿莫西林胶囊, specification: 0.25g*24粒, stock: 100, price: 15.8, discount: 0.9 }, // 更多药品... ] }, // 更多药店... ]3.2 React Native侧实现在React Native侧我们主要解决了以下几个技术难点数据加载与缓存// 使用React Query管理数据状态 const { data, isLoading } useQuery(pharmacyData, () fetch(/api/pharmacy-drugs).then(res res.json()) );列表性能优化// 使用FlatList实现高效渲染 FlatList data{pharmacyData} keyExtractor{item item.pharmacyId} renderItem{({item}) ( PharmacyCard pharmacy{item} onPress{() navigation.navigate(DrugList, {drugs: item.drugs})} / )} /复杂查询处理// 查找特定药品在所有药店中的分布 function findDrugDistribution(drugId) { return pharmacyData.map(pharmacy { const drug pharmacy.drugs.find(d d.drugId drugId); return drug ? {...drug, pharmacyName: pharmacy.name} : null; }).filter(Boolean); }3.3 鸿蒙端适配方案鸿蒙平台通过内置的JavaScript引擎直接解析相同的JSON数据结构关键实现点包括数据解析// 鸿蒙JS侧代码 export default { data: { pharmacyData: [] }, onInit() { // 从Native获取数据 const data requireNativeModule(DataModule).getPharmacyData(); this.pharmacyData JSON.parse(data); } }UI渲染// 鸿蒙的hml模板 list list-item for{{pharmacyData}} typepharmacy div classpharmacy-item text{{$item.name}}/text list list-item for{{$item.drugs}} typedrug text{{$item.name}} - 库存:{{$item.stock}}/text /list-item /list /div /list-item /list4. 性能优化与实践经验4.1 数据结构优化技巧在实际项目中我们发现当数据量较大时超过1000家药店每家药店数百种药品需要特别考虑性能问题。以下是几个有效的优化手段数据分片加载// 分批加载药店数据 async function loadPharmacyDataBatch(batchSize, lastId) { const response await fetch( /api/pharmacy-data?limit${batchSize}after${lastId} ); return response.json(); }内存优化使用数字ID代替字符串ID对重复的药品名称使用引用压缩传输数据服务端启用gzip本地缓存策略// 使用React Native的AsyncStorage缓存数据 const cacheData async (data) { try { await AsyncStorage.setItem( pharmacyDataCache, JSON.stringify(data) ); } catch (e) { console.error(缓存失败, e); } };4.2 跨平台调试技巧在开发过程中我们总结了以下调试经验数据结构验证工具// 开发环境下的数据校验 if (__DEV__) { validatePharmacyDataSchema(pharmacyData); }性能分析React Native使用Performance Monitor鸿蒙使用HiDebug工具关键操作添加时间戳日志错误边界处理// React Native错误边界组件 class ErrorBoundary extends React.Component { componentDidCatch(error, info) { logErrorToService(error, info); } render() { return this.props.children; } }4.3 实际踩坑记录在项目开发过程中我们遇到了几个典型问题及解决方案问题1鸿蒙端数组解析异常现象某些嵌套层级的数据无法正确渲染原因鸿蒙JS引擎对深度嵌套对象的处理有差异解决将数据层级控制在3层以内过深的结构进行扁平化处理问题2React Native列表卡顿现象药店列表滚动时有明显卡顿解决// 优化方案 FlatList initialNumToRender{10} maxToRenderPerBatch{5} windowSize{7} // 其他优化参数... /问题3数据同步冲突场景多端同时修改药品库存方案实现乐观UI更新后端校验function updateStock(drugId, newStock) { // 乐观更新 setLocalData(prev /*...*/); // 实际请求 api.updateStock(drugId, newStock).catch(() { // 回滚本地更改 }); }5. 扩展应用与未来优化当前方案已经稳定运行在多个医药零售项目中但仍有改进空间数据类型扩展添加药品图片等多媒体数据支持药品分类的多级树形结构引入时间序列数据记录价格变动性能进阶优化考虑使用Protocol Buffers替代JSON实现增量数据更新机制探索SQLite本地缓存方案开发体验提升自动生成TypeScript类型定义开发可视化数据结构编辑器完善Mock数据生成工具实践证明基于React Native和鸿蒙的嵌套数组方案在医药零售领域具有显著优势。它不仅解决了跨平台开发的核心痛点还通过简洁的数据结构实现了高性能的业务场景支持。这种架构思路同样适用于其他需要处理复杂关联关系的领域如电商、物流等行业的移动应用开发。
