React实战进阶45讲 / 掌握当下热门的前端利器

Name: React实战进阶45讲
Author: 王沛

王沛 eBay中国研发中心资深技术专家

更新：2026-06-26 12:25:04

课程目录
课程介绍

05 | React组件的生命周期及其使用场景
06 | 理解Virtual DOM及key属性的作用
07 | 组件设计模式 : 高阶组件和函数作为子组件
08 | 理解新的Context API及其使用场景
09 | 使用脚手架工具创建React项目
10 | 打包和部署
11 | Redux（1） : 前端为何需要状态管理库
12 | Redux（2） : 深入理解Store、Action、Reducer
13 | Redux（3） : 在React中使用Redux
14 | Redux（4） : 理解异步Action、Redux中间件
15 | Redux（5） : 如何组织Action和Reducer
16 | Redux（6） : 理解不可变数据（Immutability）
17 | React Router（1）：路由不只是页面切换，更是代码组织方式
18 | React Router（2）：参数定义，嵌套路由的使用场景
19 | UI组件库对比和介绍：Ant.Design、Material UI、Semantic UI
20 | 使用Next.js创建React同构应用
21 | 使用Jest、Enzyme等工具进行单元测试
22 | 常用开发调试工具：ESLint、Prettier、React DevTool、Redux DevTool
23 | 前端项目的理想架构：可维护、可扩展、可测试、易开发、易建构
24 | 拆分复杂度（1）：按领域模型（feature）组织代码，降低耦合度
25 | 拆分复杂度（2）：如何组织component、action和reducer
26 | 拆分复杂度（3）：如何组织React Router的路由配置
27 | 使用Rekit（1）：创建项目，代码生成和重构
28 | 使用Rekit（2）：遵循最佳实践，保持代码一致性
29 | 使用React Router管理登录和授权
30 | 实现表单（1）：初始数据，提交和跳转
31 | 实现表单（2）：错误处理，动态表单元素，内容动态加载
32 | 列表页（1）：搜索，数据缓存和分页
33 | 列表页（2）：缓存更新，加载状态，错误处理
34 | 页面数据需要来源多个请求的处理
35 | 内容页的加载与缓存
36 | 基于React Router实现分步操作
37 | 常见页面布局的实现
38 | 使用React Portals实现对话框，使用antd对话框
39 | 集成第三方JS库：以d3.js为例
40 | 基于路由实现菜单导航
41 | React中拖放的实现
42 | 性能永远是第一需求：时刻考虑性能问题
43 | 网络性能优化：自动化按需加载
44 | 使用Reselect避免重复计算
45 | 下一代React：异步渲染
46 | 使用Chrome DevTool进行性能调优&结课测试

课程介绍

你将获得掌握用 React 开发大型项目的能力。讲师介绍王沛，现担任 eBay 中国研发中心资深技术专家，负责 eBay 内部前端框架的研发。是国内第一批 React 的实践者和布道者，创建了 Rekit...

你将获得

掌握用 React 开发大型项目的能力。

讲师介绍

王沛，现担任 eBay 中国研发中心资深技术专家，负责 eBay 内部前端框架的研发。

是国内第一批 React 的实践者和布道者，创建了 Rekit 开源项目：专属的 React 开发 IDE，目前在 Github 有超过 3000 Star。

曾任职于 IBM 和 SAP，主导了多个 UI 框架和大型云产品的前端架构和开发，在 IBM 期间期间参与 Dojo 开源项目，成为代码贡献者，参与创建和设计了基于 Dojo 的 GridX 项目。

在 InfoQ 发表过多篇文章，撰写过《深入浅出 React》专栏，并在 QCon 大会上做过演讲。出版过书籍《征服Ajax：Web2.0开发技术详解》，《Web2.0界面设计模式》。

课程介绍

注：本课程基于React 16.4版本构建。

React 是目前最为流行的前端 UI 开发框架之一，根据 Hacker News 发布的招聘趋势数据，React 已经连续 12 个月成为最受招聘方欢迎的技能，需求指数一度达到 25.93 %，足可见 React 在业内的被认可度。

在 React 出现之前，基于 HTML 的前端界面开发正变得越来越复杂，如何将来自于服务器端或者用户输入的动态数据高效地反映到复杂的用户界面上，是最让人头疼的难题。而 React 则很好地解决了这个问题，使用 React 可以非常轻松地创建用户交互界面，在数据改变时更高效地更新渲染界面。

React 使用声明式的语法帮助开发者直观地描述和组织复杂的界面逻辑，让前端应用开发变得越来越容易；React 繁荣的生态圈还为开发者提供了大量的最佳实践；活跃的社区则让你碰到问题可以迅速找到解决方案。

React 不仅让你能够从容应对大型复杂前端应用的开发，其编程思想还能应用到 React Native 原生 App 开发，服务器端渲染的后端开发。

无论你是没有接触过 React 的前端工程师，还是移动应用开发人员，或者仅仅是想跨界了解前端开发现状的程序员，学习 React 不仅能让你丰富自身的技能库，掌握当下最热门的前端开发利器，同时还能大大提升职场竞争力，迈向更高的台阶。

课程目录

适合人群

有实际项目开发经验的前端开发工程师；
iOS、Android 移动应用开发工程师；
对 React 相关技术感兴趣的技术人员。

注意：学习本课程之前，你需要先掌握 HTML、JavaScript 方面的基本知识，简单阅读过 React 的官方文档，并具备前端项目的实际开发经验。

05 | React组件的生命周期及其使用场景

06 | 理解Virtual DOM及key属性的作用

07 | 组件设计模式 : 高阶组件和函数作为子组件

08 | 理解新的Context API及其使用场景

09 | 使用脚手架工具创建React项目

10 | 打包和部署

11 | Redux（1） : 前端为何需要状态管理库

12 | Redux（2） : 深入理解Store、Action、Reducer

13 | Redux（3） : 在React中使用Redux

14 | Redux（4） : 理解异步Action、Redux中间件

15 | Redux（5） : 如何组织Action和Reducer

16 | Redux（6） : 理解不可变数据（Immutability）

17 | React Router（1）：路由不只是页面切换，更是代码组织方式

18 | React Router（2）：参数定义，嵌套路由的使用场景

19 | UI组件库对比和介绍：Ant.Design、Material UI、Semantic UI

20 | 使用Next.js创建React同构应用

21 | 使用Jest、Enzyme等工具进行单元测试

22 | 常用开发调试工具：ESLint、Prettier、React DevTool、Redux DevTool

23 | 前端项目的理想架构：可维护、可扩展、可测试、易开发、易建构

24 | 拆分复杂度（1）：按领域模型（feature）组织代码，降低耦合度

25 | 拆分复杂度（2）：如何组织component、action和reducer

26 | 拆分复杂度（3）：如何组织React Router的路由配置

27 | 使用Rekit（1）：创建项目，代码生成和重构

28 | 使用Rekit（2）：遵循最佳实践，保持代码一致性

29 | 使用React Router管理登录和授权

30 | 实现表单（1）：初始数据，提交和跳转

31 | 实现表单（2）：错误处理，动态表单元素，内容动态加载

32 | 列表页（1）：搜索，数据缓存和分页

33 | 列表页（2）：缓存更新，加载状态，错误处理

34 | 页面数据需要来源多个请求的处理

35 | 内容页的加载与缓存

36 | 基于React Router实现分步操作

37 | 常见页面布局的实现

38 | 使用React Portals实现对话框，使用antd对话框

39 | 集成第三方JS库：以d3.js为例

40 | 基于路由实现菜单导航

41 | React中拖放的实现

42 | 性能永远是第一需求：时刻考虑性能问题

43 | 网络性能优化：自动化按需加载

44 | 使用Reselect避免重复计算

45 | 下一代React：异步渲染

46 | 使用Chrome DevTool进行性能调优&结课测试

课程介绍

你将获得

讲师介绍

课程介绍

课程目录

适合人群

特别放送

免费领取福利

限时活动推荐

订阅须知