mcpField
E
expo-react-native-javascript-best-practices

expo-react-native-javascript-best-practices

github.com/mindrally开发287783 次安装3 周前更新
代码仓库

关于 expo-react-native-javascript-best-practices

为开发者提供构建 Expo React Native 应用的 JavaScript 实践，侧重清晰结构与性能优化，涵盖函数组件、按功能组织、响应式样式和 Expo 部署实践。

主要功能

  1. 01函数组件与 Hooks
  2. 02可复用的功能模块组织
  3. 03JavaScript 命名与风格指导
  4. 04渲染和 FlatList 优化
  5. 05响应式样式与图像指导
  6. 06Expo EAS Build 和 OTA 实践

适用场景

  1. 01按功能组织 React Native 应用
  2. 02减少不必要的组件重渲染
  3. 03优化较长的 FlatList 页面
  4. 04准备 Expo 应用部署

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill expo-react-native-javascript-best-practices

安装后在 Claude Code 中输入/expo-react-native-javascript-best-practices确认已加载。

详细介绍

Expo React Native JavaScript 最佳实践

使用 JavaScript 构建高质量 Expo React Native 应用的指南，重点关注代码整洁性、模块化和性能。

代码风格与结构

  • 代码整洁易读：确保代码易于阅读和理解。为变量和函数使用描述性名称。
  • 函数组件：优先使用带有 hooks（useState、useEffect）的函数组件，而非类组件
  • 组件模块化：将组件拆分为更小、可复用且职责单一的部分
  • 按功能组织：将相关组件、hooks 和样式归入功能目录（例如，user-profile、chat-screen）

命名约定

  • 变量和函数：使用 camelCase（例如，isFetchingData、handleUserInput）
  • 组件：使用 PascalCase（例如，UserProfile、ChatScreen）
  • 目录：使用小写连字符命名（例如，user-profile、chat-screen）

JavaScript 使用

  • 尽量减少全局变量，避免意外副作用
  • 利用箭头函数、解构和模板字面量等 ES6+ 特性编写简洁代码
  • 如果不使用 TypeScript，请使用 PropTypes 进行类型检查

性能优化

  • 避免不必要的状态更新；在需要时使用本地状态
  • 使用 React.memo() 避免不必要的重新渲染
  • 使用以下属性优化 FlatList：
    • removeClippedSubviews
    • maxToRenderPerBatch
    • windowSize
  • 避免在 renderItem 或事件处理程序中使用匿名函数

UI 与样式

  • 使用 StyleSheet.create() 统一样式，或使用 Styled Components 实现动态样式
  • 确保应用在不同屏幕尺寸和方向下都能自适应
  • 使用 react-native-fast-image 等经过优化的图像库

最佳实践

  • 遵循 React Native 的线程模型，确保 UI 流畅运行
  • 使用 Expo 的 EAS Build 和 OTA 更新进行部署
  • Expo Router：在 React Native 应用中使用 Expo Router 实现基于文件的路由。它支持原生导航、深层链接，并可在 Android、iOS 和 Web 上运行

评论

支持 Markdown