ohos_react_native代码规范：鸿蒙React Native开发最佳实践

技术文档

ohos_react_native代码规范：鸿蒙React Native开发最佳实践

【免费下载链接】ohos_react_native React Native鸿蒙化仓库项目地址: https://gitcode.com/openharmony-sig/ohos_react_native

引言

在鸿蒙生态中开发React Native应用，遵循统一的代码规范至关重要。本文详细阐述ohos_react_native项目的代码规范体系，涵盖文件组织、命名约定、组件设计、性能优化等关键方面，帮助开发者构建高质量、可维护的鸿蒙React Native应用。

目录结构规范

项目根目录结构

ohos_react_native/├── docs/  # 文档目录├── react-native-harmony/ # 核心库├── react-native-harmony-cli/ # CLI工具├── tester/  # 测试应用├── template/  # 项目模板└── react-native-harmony-sample-package/ # 示例包

模块化目录组织

mermaid

命名规范

文件命名约定

文件类型命名规范示例 React组件 PascalCase Button.tsx 工具函数 camelCase formatDate.ts 类型定义 PascalCase UserTypes.ts 配置文件 kebab-case metro.config.js

组件命名规则

// 正确示例export const PrimaryButton = () => { /* ... */ }export const UserProfileCard = () => { /* ... */ }// 错误示例export const primaryButton = () => { /* ... */ } // 应使用PascalCaseexport const user_profile_card = () => { /* ... */ } // 应使用PascalCase

代码风格指南

组件定义规范

/** * Copyright (c) 2024 Huawei Technologies Co., Ltd. * * 组件功能描述 * @param props - 组件属性说明 */import React, { useRef, useState } from \'react\';import { View, Text, StyleSheet } from \'react-native\';interface ButtonProps { label: string; onPress: () => void; disabled?: boolean;}export const PrimaryButton: React.FC = ({ label, onPress, disabled = false}) => { const [isPressed, setIsPressed] = useState(false); const handlePress = () => { if (!disabled) { onPress(); } }; return (  setIsPressed(true)} onPressOut={() => setIsPressed(false)} onPress={handlePress} > {label}  );};const styles = StyleSheet.create({ container: { padding: 12, backgroundColor: \'#007AFF\', borderRadius: 8, alignItems: \'center\' }, label: { color: \'white\', fontWeight: \'600\' }, disabled: { opacity: 0.5 }, pressed: { opacity: 0.8 }});

TypeScript类型定义

// 基础类型定义export interface User { id: string; name: string; email: string; avatar?: string;}// 组件Props类型export interface CardProps { title: string; content: string; onPress?: () => void; style?: ViewStyle;}// 联合类型export type ButtonVariant = \'primary\' | \'secondary\' | \'danger\';// 工具类型export type Optional = Omit & Partial<Pick>;

性能优化规范

组件渲染优化

import React, { memo, useCallback } from \'react\';// 使用React.memo避免不必要的重渲染const ExpensiveComponent = memo(({ data, onUpdate }: { data: string[]; onUpdate: (item: string) => void;}) => { // 使用useCallback缓存回调函数 const handleItemPress = useCallback((item: string) => { onUpdate(item); }, [onUpdate]); return (  {data.map(item => (  ))}  );});// 列表项组件const Item = memo(({ item, onPress }: { item: string; onPress: (item: string) => void;}) => { return (  onPress(item)}> {item}  );});

内存管理规范

// 正确使用useEffect清理useEffect(() => { const subscription = eventEmitter.subscribe(handleEvent); return () => { subscription.unsubscribe(); };}, [handleEvent]);// 避免内存泄漏useEffect(() => { let isMounted = true; const fetchData = async () => { const data = await api.fetchData(); if (isMounted) { setData(data); } }; fetchData(); return () => { isMounted = false; };}, []);

鸿蒙特定规范

原生组件集成

import { NativeModules, NativeEventEmitter } from \'react-native\';// 原生模块调用规范const { HarmonyNativeModule } = NativeModules;export const useHarmonyFeature = () => { const [status, setStatus] = useState(\'idle\'); const invokeNativeMethod = useCallback(async (params: any) => { try { setStatus(\'loading\'); const result = await HarmonyNativeModule.performAction(params); setStatus(\'success\'); return result; } catch (error) { setStatus(\'error\'); throw error; } }, []); return { invokeNativeMethod, status };};

多端适配规范

// 平台特定代码import { Platform } from \'react-native\';const styles = StyleSheet.create({ container: { padding: Platform.select({ harmony: 16, ios: 12, android: 14, default: 16 }), // 鸿蒙特定样式 ...(Platform.OS === \'harmony\' && { harmonySpecific: true }) }});// 组件适配const AdaptiveComponent = () => { if (Platform.OS === \'harmony\') { return ; } return ;};

测试规范

单元测试结构

// __tests__/Button.test.tsximport React from \'react\';import { render, fireEvent } from \'@testing-library/react-native\';import { PrimaryButton } from \'../PrimaryButton\';describe(\'PrimaryButton\', () => { it(\'renders correctly\', () => { const { getByText } = render(  ); expect(getByText(\'Click me\')).toBeTruthy(); }); it(\'calls onPress when clicked\', () => { const onPress = jest.fn(); const { getByText } = render(  ); fireEvent.press(getByText(\'Click me\')); expect(onPress).toHaveBeenCalled(); }); it(\'disables when disabled prop is true\', () => { const onPress = jest.fn(); const { getByText } = render(  ); fireEvent.press(getByText(\'Click me\')); expect(onPress).not.toHaveBeenCalled(); });});

集成测试规范

// __tests__/AppIntegration.test.tsximport React from \'react\';import { render, waitFor } from \'@testing-library/react-native\';import { NavigationContainer } from \'@react-navigation/native\';import App from \'../App\';describe(\'App Integration\', () => { it(\'navigates through app screens\', async () => { const { getByText, findByText } = render(    ); // 等待初始屏幕加载 await waitFor(() => { expect(getByText(\'Welcome\')).toBeTruthy(); }); // 模拟导航操作 fireEvent.press(getByText(\'Go to Details\')); // 验证导航结果 await findByText(\'Details Screen\'); });});

错误处理规范

全局错误边界

import React from \'react\';import { View, Text, Button } from \'react-native\';class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { // 记录错误到监控系统 console.error(\'Error caught by boundary:\', error, errorInfo); } render() { if (this.state.hasError) { return (  Something went wrong {this.state.error.message}

API错误处理

export const useApi = () => { const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const callApi = useCallback(async (url: string, options?: RequestInit) => { setLoading(true); setError(null); try { const response = await fetch(url, options); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return data; } catch (err) { setError(err as Error); throw err; } finally { setLoading(false); } }, []); return { callApi, loading, error };};

代码审查清单

质量检查表

检查项要求状态类型定义完整所有Props和State都有TypeScript类型 ✅ 错误处理完善关键操作都有try-catch和错误边界 ✅ 性能优化使用memo、useCallback等优化手段 ✅ 代码注释重要逻辑有清晰注释 ✅ 测试覆盖关键功能有单元测试 ✅ 可访问性支持屏幕阅读器和键盘导航 ✅

总结

遵循ohos_react_native代码规范，不仅能提升代码质量，还能确保鸿蒙React Native应用的良好性能和可维护性。本文涵盖的规范体系从项目结构到具体实现细节，为开发者提供了全面的指导框架。

记住：规范的代码不仅是为了机器执行，更是为了人类阅读和维护。在鸿蒙生态中开发React Native应用，坚持这些最佳实践将帮助您构建出卓越的跨平台应用体验。

【免费下载链接】ohos_react_native React Native鸿蒙化仓库项目地址: https://gitcode.com/openharmony-sig/ohos_react_native

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

ohos_react_native代码规范：鸿蒙React Native开发最佳实践