React Native 新架构实战课

React Native 新架构实战课 / 实操+基建+原理的一站式解决方案

蒋宏伟 58同城前端架构师，58RN 负责人

  • 课程介绍

  1. 开篇词｜为什么要选择React Native做你的跨端方案？

    可以预见，React Native 新架构将会给我们带来巨大惊喜。

  2. 加餐｜集中答疑：详解Android环境搭建

    搭建 Android 环境比搭建 iOS 环境遇到的网络问题更少，更推荐新手直接搭建 Android 环境。

  3. 加餐｜集中答疑：详解iOS环境搭建

    为了方便新同学学习 React Native，更快地搭建好环境，这节课会从头到尾带你搭建一套新环境。

  4. 01｜学习React Native，你需要掌握哪些知识？

    第一讲我们先来看看 React Native 基础知识的地图，让你知道自己该学什么、要学什么，对基础知识有一个整体的认知。

  5. 02｜Component：搭建静态页面的正确思路是什么？

    搭建 React Native 静态页面的核心就是搭建组件。

  6. 03｜Style：关于样式你需要知道的三件事

    人靠衣装、佛靠金装，页面体验要好就离不开样式的帮助。

  7. 04｜State：如何让页面“动”起来？

    我会以搭建一个会“动”的简易购物车页面为例，和你分享下我这方面的经验。

  8. 05｜Image：选择适合你的图片加载方式

    图片组件的最佳实践解析！

  9. 06｜Pressable：如何实现一个体验好的点按组件？

    懂用户，懂技术，懂原理。

  10. 07｜TextInput：如何实现一个体验好的输入框？

    这一讲，我将以如何实现一个体验好的输入框为线索，和你介绍使用 TextInput 组件应该知道的三件事。

  11. 08｜List：如何实现高性能的无限列表？

    React Native 中的列表组件，到底哪个好？

  12. 09｜Fast Refresh：提高UI调试效率神器

    快速刷新，提高UI调试效率。

  13. 10｜Debug：解决BUG思路有哪些？

    虽然比尔盖茨是“传说级”的程序员，但他写代码也是需要调试的。

  14. 11｜组件实战：如何实现瀑布流？

    文末自取一个好用的瀑布流方案～

  15. 12｜页面实战：如何搭建一个电商首页？

    以战养学，方为上策！

  16. 直播加餐｜七年，我的跨端实践和探索

    过去、现在与未来。

  17. 13｜生态：React Native Awesome

    把它当成导览图吧！

  18. 14｜Reanimated：如何让动画变得更流畅？

    React Native's Animated library reimplemented.

  19. 15｜Gesture（上）：如何实现一个拖拽动效？

    手势第一关！

  20. 16｜Gesture（中）：如何解决单视图多手势的冲突问题？

    手势进阶篇！

  21. 17｜Gesture（下）：如何解决多视图多手势的冲突问题？

    Gesture三讲收官！

  22. 18｜Navigation：页面之间怎么跳转？

    今天，我们来看看怎么用 React Navigation 导航把各个页面链接起来。

  23. 19｜Redux：大型应用应该如何管理状态？

    今天这节课，我们一起来探究 Redux/Redux Toolkit 到底何时用、怎么用。

  24. 20｜Sentry：线上错误与性能监控怎么处理？

    如何实现一个简易监控 SDK

  25. 21｜混合应用：如何从零开始集成React Native？

    混合开发要怎么做？

  26. 22｜自定义组件：如何满足业务的个性化需求？

    自定义的Native组件该如何用、何时用。

  27. 23｜热更新：如何搭建一个热更新平台？

    站在服务端的角度，聊聊如何搭建一个热更新平台。

  28. 24｜拆包：Metro拆包的工作原理是什么？

    metro-code-split原理是怎样的，可以怎么使用。

  29. 25｜性能优化：如何设计一个合适的性能优化方案？

    如何设计一个合适的性能优化方案

  30. 26｜客户端优化：如何把性能提升到极致？

    今天我们主要站从客户端角度，讲述React Native 如何在客户端侧将性能优化到极致，带你开启 React Native 的秒开世界。

  31. 阶段测试｜React Native的这些核心知识，你都掌握了吗？

    期待你满分的好消息！

  32. 总结与展望｜新架构探索之旅，马上开始

    衷心邀请你和我一起完成这场“长跑”，在接下来的学习中，深入探索 React Native 新架构的新技术和新应用，抓住技术红利！

  33. 27｜跨端的机遇：小程序、Flutter和React Native原理对比

    如果只学那些日常会用到的、别人也会知识点，我的职业竞争力在哪里？

  34. 28｜追本溯源：从第一版React Native开始学会读懂源码

    今天，我们以第一版React Native源码为例，教你如何通过读源码，一步一步理解React Native新架构。

  35. 29｜弄清现状：新架构预览版究竟长什么样？

    今天我们的目标就是承接上一节课讲过的方法，画一张新架构的“鸟瞰图”，看看当前0.70 版本的新架构预览版究竟是怎么设计的。

  36. 30｜JavaScript引擎：双向通讯底层原理是什么？

    双向通讯底层原理是什么？

  37. 31｜多线程：RN底层是如何保障交互体验的？

    这一讲我们会围绕着 React Native 的多线程进行介绍，并会重点介绍新架构是如何改善交互体验的。

  38. 32｜Fabric：新渲染器的演进之路

    对核心渲染流程的持续迭代和优化，是 React Native 能够广受欢迎的重要原因之一。

  39. 33｜AI前沿：ChatGPT资料精选集

    本精选集的目的在于提供一个便捷的参考资源，帮助你全面掌握ChatGPT。

  40. 34｜升级收益：这两年React Native都做了哪些升级？

    一文解析现阶段 React Native 的发展如何？新架构是否真的可用？是否应该对自己的业务进行升级？

  41. 35｜自动化：升级0.72新架构的步骤和关键

    升级 React Native 版本和新架构难免会遇到一些阻碍，我们可以通过三个步骤逐步跨越这些障碍。

  42. 36｜升新不升旧：自定义组件如何升级到新架构？

    介绍两种升级新架构的策略。

课程介绍

你将获得 有用：即学即用，8+ 核心组件应用技巧 实战：10+ 实战 Demo，搭建完整 React Native 应用 深入：掌握一套完整的基建解决方案 前沿：持续 365 天技术追踪，解读新架构动态 讲师介绍 课程介绍...

你将获得

  • 有用：即学即用，8+ 核心组件应用技巧
  • 实战：10+ 实战 Demo，搭建完整 React Native 应用
  • 深入：掌握一套完整的基建解决方案
  • 前沿：持续 365 天技术追踪，解读新架构动态

讲师介绍


课程介绍

作为当前最热门的跨端框架之一，近年来 React Native 备受开发者追捧。它好上手，开发成本低，对前端和客户端都相对友好，而且它也是当下唯一能支持复杂业务场景下热更新的跨端框架。

但另一方面，React Native 本身迭代速度非常快，想要系统学习 React Native 并没有那么容易。而且，它也曾饱受性能方面的诟病，让一些团队踩了不少坑。

技术的车轮滚滚向前。年初，Facebook 发布重磅消息，重构已久的 React Native 新架构确定会在今年，也就是2022年正式推出。据行业内报告及调研，新架构在最关键的性能问题上相比老架构有了非常大的提升，这将会为 React Native 开启一个全新的阶段。现在就是你“入坑” React Native 的最佳时机！

为此，我们邀请了58同城前端架构师、58RN 负责人蒋宏伟老师。他会结合多年的一线经验，为你重点讲解 React Native 的核心组件、社区生态和基础设施建设，帮你一次性打通 React Native 开发能力，让你不仅能完整开发一个 React Native 应用，还能为团队基出设施建设做贡献，并提升自己的架构能力。

同时，针对 React Native 新架构，蒋老师还将带你持续一年追踪它的最新动态，聚焦新架构的原理和社区最新实践，让你能第一时间享受到前沿技术变革带来的红利。

课程设计

本次课程不会一次性更完，而是按时间分成两个部分：常规更新阶段+动态更新阶段。

在常规更新阶段，老师会给你勾勒一个 React Native 学习和进阶的系统路径，用 10+ 实战 Demo 带你完整开发一个 React Native 应用。同时，也让你快速成长，为团队基础设施建设做贡献，提升自己的架构能力。这一阶段的内容主要包括三部分：

第一部分：React Native 核心基础篇。这一部分主要是打牢基础。老师会带你深入学习 React 和 React Native 的基础知识，让你能够成功搭建一个 React Native 页面。

第二部分：React Native 社区生态篇。这一部分主要是帮你开阔眼界，了解社区有哪些成熟方案，需要时能够拿来即用。同时也让你能够借助 React Native 生态中最常用的几个工具，搭建一个完整的 React Native 应用。

第三部分：React Native 基础设施建设篇。这一部分，老师会从技术应用层面，给你介绍从构建 React Native 混合应用到热更新，再到性能调优的全过程，让你能为团队搭建基础设施建设出谋献策，提升你的架构能力。

在动态更新阶段，也就是常规更新阶段结束之后，我们会以每月一讲的频率，持续一年帮你跟踪 React Native 新架构的最新进展，并和你聊聊和 React Native 新架构相关的最前沿的新技术。包括但不限于 Hermes、Fabric、JSI、React Native Skia、React Native SSR 等等，助你第一时间把握前沿技术变革的红利。


课程目录


适合人群

需要你具有一定的 JavaScipt 基础。

  • 如果你是初学者，没有前端或客户端的相关经验，直接学习本专栏难度较大。你需要有强烈的学习意愿，边干边学进行大量实操，才能较好地完成学习任务;

  • 如果你有一年以上大前端相关领域的实践，你想学习 React Native，本专栏能够给你带来 React Native 实操、经验、原理方面的收获；

  • 如果你有三年以上的大前端工作经验，使用过跨端框架，你会收获到开发 React Native 的最佳实践，你能知道如何搭建一套 React Native 体系，同时你也能及时了解到新架构带来的变化；

  • 跨端领域是一个多端融合的领域。在这里，前端工程师能够从更底层的视角、甚至是源码的视角，深入理解除浏览器外其他端是如何渲染页面的；在这里，移动端工程师能从开发框架的角度掌握 React 的思想精髓，以及动态更新的原理和应用。


订阅须知