Back to Details

expo-react-native-javascript-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Expo React Native JavaScript Best Practices

Expo React Native JavaScript 最佳实践

Guidelines for building high-quality Expo React Native applications with JavaScript, focusing on clean code, modularity, and performance.
本指南介绍如何使用JavaScript构建高质量的Expo React Native应用，重点关注整洁代码、模块化和性能。

Code Style and Structure

代码风格与结构

  • Clean, Readable Code: Ensure your code is easy to read and understand. Use descriptive names for variables and functions.
  • Functional Components: Prefer functional components with hooks (useState, useEffect) over class components
  • Component Modularity: Break components into smaller, reusable pieces with single responsibility
  • Feature-Based Organization: Group related components, hooks, and styles into feature directories (e.g., user-profile, chat-screen)
  • 整洁可读的代码：确保代码易于阅读和理解。为变量和函数使用描述性名称。
  • 函数式组件：优先使用搭配hooks（useState、useEffect）的函数式组件，而非类组件
  • 组件模块化：将组件拆分为更小、可复用的单一职责模块
  • 基于功能的组织方式：将相关组件、hooks和样式归类到功能目录中（例如：user-profile、chat-screen）

Naming Conventions

命名规范

  • Variables and Functions: Use camelCase (e.g., 
    isFetchingData
    , 
    handleUserInput
    )
  • Components: Use PascalCase (e.g., 
    UserProfile
    , 
    ChatScreen
    )
  • Directories: Use lowercase hyphenated names (e.g., 
    user-profile
    , 
    chat-screen
    )
  • 变量与函数：使用小驼峰式命名（例如：
    isFetchingData
    、
    handleUserInput
    ）
  • 组件：使用大驼峰式命名（例如：
    UserProfile
    、
    ChatScreen
    ）
  • 目录：使用小写连字符命名（例如：
    user-profile
    、
    chat-screen
    ）

JavaScript Usage

JavaScript 使用规范

  • Minimize global variables to prevent unintended side effects
  • Leverage ES6+ features like arrow functions, destructuring, and template literals to write concise code
  • Use PropTypes for type checking if not using TypeScript
  • 尽量减少全局变量，避免意外的副作用
  • 利用ES6+特性如箭头函数、解构赋值和模板字面量编写简洁代码
  • 如果不使用TypeScript，使用PropTypes进行类型检查

Performance Optimization

性能优化

  • Avoid unnecessary state updates; use local state when needed
  • Apply 
    React.memo()
    to prevent unnecessary re-renders
  • Optimize FlatList with the following props: 
    • removeClippedSubviews
    • maxToRenderPerBatch
    • windowSize
  • Avoid anonymous functions in 
    renderItem
    or event handlers
  • 避免不必要的状态更新；必要时使用局部状态
  • 使用
    React.memo()
    防止不必要的重渲染
  • 使用以下属性优化FlatList： 
    • removeClippedSubviews
    • maxToRenderPerBatch
    • windowSize
  • 避免在
    renderItem
    或事件处理程序中使用匿名函数

UI and Styling

UI与样式

  • Use 
    StyleSheet.create()
    for consistent styling or Styled Components for dynamic styles
  • Ensure responsive design across screen sizes and orientations
  • Use optimized image libraries like 
    react-native-fast-image
  • 使用
    StyleSheet.create()
    实现一致的样式，或使用Styled Components处理动态样式
  • 确保在不同屏幕尺寸和方向下的响应式设计
  • 使用优化的图片库如
    react-native-fast-image

Best Practices

最佳实践

  • Follow React Native's threading model for smooth UI performance
  • Use Expo's EAS Build and OTA updates for deployment
  • Expo Router: Use Expo Router for file-based routing in your React Native app. It provides native navigation, deep linking, and works across Android, iOS, and web
  • 遵循React Native的线程模型以保证流畅的UI性能
  • 使用Expo的EAS Build和OTA更新进行部署
  • Expo Router：在你的React Native应用中使用Expo Router进行基于文件的路由。它提供原生导航、深度链接功能，且支持Android、iOS和Web平台