React Native 高级指南


• 本指南由 @anisurrahman072 编写（🐥 在 X 上与我联系）
• 它包含12个章节和70多个高级主题，经过深入研究，于2023年花费5个月完成。该指南最初以12篇文章的形式发表在 (Medium)上。
• 所有文章最初基于 RN v0.71 版本。

• 🙏 如果你觉得这本书有帮助，请给个 STAR ⭐️

目录（70多个主题）

✅ 001 - 新架构深入终极指南

    - Codegen（原生代码生成器）
    - JSI（JavaScript 接口）
    - Hermes 引擎（新 JS 编译器）
    - Turbo 模块（新原生模块）
    - Fabric（新渲染引擎）
    - Yoga（跨平台布局引擎）

✅ 002 - 调试、性能分析和高级优化终极指南

    - iOS 和 Android 开发菜单
    - Chrome 开发者工具
    - 性能监视器
    - FPS（每秒帧数）
    - React Native 四个线程
    - 使用 Flipper 跟踪 JS 上下文
    - 使用 Xcode Instruments 进行 iOS 性能分析
    - Android Studio 中的 Android 性能分析器

✅ 003 - 使用 RNTL 和 Jest 设置进行组件（JS）测试的终极指南

    - RN 测试类型简介
    - React Native Testing Library (RNTL) 详解
    - JEST 设置及所有配置
    - API => Render()："queries"、"update"、"debug"
    - API => UserEvent()
    - API => FireEvent()
    - API => WaitFor()
    - API => Mocking()："jest.fn()" 和 "jest.mock()"
    - RN 中的宿主组件和复合组件

✅ 004 - Hermes 和静态 Hermes 终极指南

    - Bundle 发布
    - Bundle 与 Hermes 的关系
    - Hermes 字节码（.hbc）
    - 如何启用 Hermes？
    - 确保 Hermes 正在运行
    - 在旧版 RN 中启用 Hermes
    - 静态 Hermes

✅ 005 - 如何启用新架构的终极指南

    - 启用新架构的开发环境
    - Hermes 启用说明
    - Android 的 Npx 命令
    - iOS 的 Npx 命令
    - 确认新架构生效

✅ 006 - 性能优化终极指南

    - 使用新架构
    - 使用 FlatList/SectionList 提高列表性能
    - 移除不必要的控制台输出
    - 缓存机制
    - 图片调整大小、缓存图片和快速加载图片
    - 调度动画和原生驱动
    - 编码标准
    - Hermes 引擎
    - 使用 Reselect 配合 Redux
    - 监控内存使用
    - 快速导航

✅ 007 - 虚拟化（项目列表）优化终极指南

    - <VirtualizedList /> 优化
    - <FlatList /> 优化
    - <SectionList /> 优化
    - 带虚拟化属性的 <ScrollView />

✅ 008 - FlashList（单元格回收）优化终极指南

    - "RecyclerListView" 详解
    - 为什么要进行单元格回收？
    - "空白单元格" 与 "单元格回收" 的区别
    - FlashList 实现
    - FlashList 的所有重要属性
    - 检查 FlashList 的性能
    - 减少 "空白空间" 的技巧
    - 如何从 "FlatList" 迁移到 "FlashList"？

✅ 009 - 嵌套虚拟化（反模式）终极指南

    - 嵌套 VirtualizedLists 错误
    - 反模式原因
    - 解决方案代码

✅ 010 - 组件调用（反模式）终极指南

    - 组件调用 => 函数式方法
    - 组件调用 => React 方法
    - 函数式方法会产生静默错误！
    - 错误分析
    - React Hooks 规则（违反）
    - 错误解决方案

✅ 011 - 应用内购买（iOS 和 Android）终极指南

    - 支付网关的基本流程
    - 沙盒测试
    - GOOGLE IAP 和 iOS IAP 如何工作？
    - RevenueCat SDK
    - 实现说明（iOS 和 Android）

✅ 012 - 高阶组件、PROPS 和自定义 Hooks 终极指南

    - 高阶组件（HOC）模式
    - 渲染属性模式
    - 自定义 Hooks
    - 将状态提升到父组件
    - 什么时候自定义 Hooks 比 HOC 更好？
    - 自定义 Hooks 替代了 "渲染属性模式"

🔥 C++ 和 JSI 模块指南即将推出 → → 敬请期待 🚀

推荐

🟣 本书 - 在顶级 RN Radio 播客中被推荐 -（由 Jamon，Infinite Red 推荐）

🟣 RNTL 指南 - 被 RNTL 官方文档认可 -（由 Maciej，Callstack 认可）

贡献

• 如果你在指南中发现任何问题，请创建一个拉取请求（PR）。你的 PR 将帮助社区 🚀
• 此外，如果你想为这个仓库添加更多高级指南，我会将你添加为核心贡献者 🔥

🎯 已发布 RN SDK 版本研究指南 🚀

• 我正在对不同的 RN SDK 版本和新功能进行深入研究
• 正在研究 React Native Skia、React Native Screen、React Native、Expo 等多项新功能