基于React + Redux/Mobx搞定大型复杂项目的状态管理|完结无秘

基于React + Redux/Mobx搞定大型复杂项目的状态管理|完结无秘课程介绍(A000746)：

状态管理一直是前端开发中的重点和难点，尤其针对大型复杂项目，状态管理的设计好坏，更关乎项& * 7 E 9目开发的质量高低。本课程借助一个企业级平台项目的开发，带大家掌握React Context、 Redux、 Mobx 等三大常用 Reacti 2 , @ w h x 状态管理方案，由浅入深，从使用到i l a深度解析源码，力求透彻全面地掌握状管理，让它不再成为你通往高级前端开发路上的绊脚石。

课程目录：

• 第1章 了解互联网广告营销业务及其背后的技术3 节 | 33分钟* T ] 0 t & $ q `互联网广告业务可以说是每个大型互联网公P # = M \ O Y |司中的核心业务，广告营销是互联网公司盈利的一个非常重要的方式。本章将会介绍大型互联网公司广告营销方面常用策略及方式d O s \ [ [ m ] c，同时介绍广告营销业务背后的核心技术。
  • 视频：1-1 导学（课程简介） (12` o } K:32)
  • 视频：1-2 课程大纲及学习路线 (09:38)
  • 视频：1-3 互联网广告及其背后的技术 (10:14)
• 第2章 从零到一完成前端工程架构之基B 3 ] f 4 v础篇12 节 | 109分钟本章将会K t = o R p介绍如何从零到一完成一个前端] @ P 0 O b N工程，包括使用webpack初始化一个前Y o , x 7 g b端工程，eslint配置，typescript配置，react-router配置，基础组件库antd配置等。
  • 图文：2-1 本章概述
  • 视频：7 a J S k2-2 初始化一个React前端工程（上） (19:27)
  • 视频：2-3 初始化一个React前端工程（下） (21:04)
  • 图文：2-4 扩H 0 U M展：使用 Create React App 创建工程# = 5 Z G t * t *并修改其工程配置
  • 视频：2-5 git提交规范 (11:06)
  • 视频：2-6 es` + | G 3li` G O Y ~ 2 4 8 )nt相关配置 (08:35)
  • 视频：2-7 Typescript相关配置 (17:46)
  • 视频：2-8 前x k ? F端路由 React Router 相关配置-上 (04:40)
  • 视频：2-9 前端路由 React Router 相关配置-中 (11:19)
  • 视频：2-10 前端路由 React Router 相关配置-下 (08:39)
  • 视频：2-11 基础组件S / |库 antd 相~ M – W K关配置 (04:20)
  • 视频：2-12 本章小结 (01:44E m I)
• 第3章 从零到一完成前端工程架构之进阶篇11 节 | 89分钟一个好的前端工程可以大大提升开发效率，同时提升代码稳定性和规范性。本章将会介绍如何做前端工程架构的优化，包括打包性. D X N u b A K ^能优化{ r \ * 8 3 G { k，打包文件拆分，mock配置等。
  • 图文：3-1 本章概述
  • 视频：3-2 js 与 css 文件打包分离 (11:49)
  • 图文：3-3 扩展：UmiJS
  • 视频：3-4 本地mock配置（上） (13:18)
  • 视= o ) Y 3 T ]频：3-5 本地moc$ S q 8 . 2 ) 3 gk配置（下） (08:26)
  • 视频：3-6 远程 mot _ _ r t m % \ck 配置（上）\ ^ i T (09:02)
  • 视频：3-7 远程 mock 配置（下）) { H # [ J A D ; (12:28)
  • 视频：3-8 前端工程性能优化(本小# \ Q d T %节留有课后作业) (15:01)t t 2 n r n b A .
  • 视频：3-9 前端工程开发代码工具库配o L $置（上） (10:05)
  • 视频：3-10 前端工程开发代码工具库配置（下）e Y ! I k \ g O + (06:44)
  • 视频：3-11 本章小结 (02:07)
• 第4章 慕课营: = @ Z 0 | F 8 9销平台页面开发15 节 | 139分钟本章将会介绍如何做大型项目页面的开发，体会互联网大厂资深前端工程师在大型项目中页面开发时的思路，包括页面布局与组件设计原则、父子组件的通信机制、如何实现交互复杂的业务组件等。
  • 图文：4-1 本章概述
  • 视频：4-2 页面布局与组件设计（– & ~ x上） (07:49)
  • 视频：4-3 页面布局与组件设计（中） (12:34)
  • 视频：4-4 Header 组件开发（上） (16:41)
  • 视频：4-5 页_ Z l M A E面布局与组件设计（下） (10:45)
  • 视频：4-N D o ` a u6 Header 组件开发（下） (16:12)
  • 视z w V频：4-7 DataTrend 组件开? z : _ 3 : o发（上） (12:05)
  • 视频：4-8 DataTrend 组件开发（中） (12:16)
  • 视频：4-9 DR c G h = GataTrend 组件开发（下） (10:20)
  • 视频：4-10 PromotionCard 组件开发（上） (09:31)
  • 视频：4-11 PromotionCard 组件开发（下） (06:53)
  • 视频：4-12 ProductCard 组件开发 (09:11)
  • 视频：a = h | x k 2 W4-1B l \ r l d3 Account 组件开发 (08:33)
  • 视频：4-14 本章小结 (05:31)
  • 图文：4-15 扩展：React 类组件、函数组件及高阶组件
• 第5章 慕课营销平台搜索推广页面开发12 节 | 140分钟本章将会L b a 1 v 9 ! t ,介D P O X L 3 Y s绍慕课营l X 2 l x R 3销平台搜索推广页面的5 5 f开发，重点介绍如何做页面中组件及代码的复用，如何3 / \做到代码开发的高效与可维护。
  • 图文：5-1 本章概述
  • 视频：5-2 搜索推广页面布局与组e h ^ e V +件设计（上） (11:20)
  • 视频：5-3 搜索推广页面x \ \布局与组件设计（下） (10:31)
  • 视频：5-4 Header 及 DataW U iTrW P Z 7 U P = (end 组件复用（上） (11:30)
  • 视频：5-5 Header 及 DataTrend 组件复用（下） (12:21)
  • 视频：5-6 搜索推广页 Account 组件开发, # P 2 Y (11:54)
  • 视频：5-7 WaveAnalysis 组件开发（上） (08:50)
  • 视频：5-8 WavN 3 6 U 3eAnalysg W x vis 组件[ z ^ 7 y开发（中） (15:15] l 0 2 | : V 8)
  • 视频：5-9 WavV ~ m XeR / 3 % b / iAnalysis 组件开发（下） (18:25)
  • 视频：5-10 UserPortrait 组件开发及 Footer 组件复用 (17:57)
  • 视频：5-11 UserPortrait 组件开发及 Footer 组件复用 (17:5E t 4 s ~ s w7)
  • 视频：5-1O L { K i2K * i l # f 本章小结 (03:5w 3 b M ~5)
• 第6章 使用 React Context 实现应用状态管理8 节 | 72分钟本章将会介绍React官方为我们{ f s f 8提供的公共状态管理工具 React Context，并且使用React ContexX M D _ c o *t来完成应用中全局状态的管理。了解React Context的使用方K j & [ ? B &式，也会为g [ ) 0 g !我们后面探究react-redux和mobx-react工具的内部原理有一定的帮助。
  • 图文：6-1 本章概述
  • 视频：6-2 React 中的状态管理 (05:28)
  • 视频：6-3 认识 React ContexR c T Y L 8 k tt (15:20)
  • 视频：6-4 使用 React Context 实现公共状态管理（上） (16:39)
  • 视频：6-5 使用 React Conts q ^ e qext 实现公共状态管理（下） (04:55)
  • 视频：6-6 前端工程性能优化（上） (08:03)
  • 视频：6-7 前端工程性能优化（下） (15:09)
  • 视频：6-8 本章小结 (05:35)
• 第p I Y v7章 使用 Redux 实现应用状态管理11 节 | 99分钟本章将会介绍React生态中常用的第三方状态管理方案Redux的核心思想、使用方式以及其高F 8 h : * ` p \ /级工具如redux-thunk和redux-saga中间件的使用等。
  • 图文f Y + f g n：7-1 本章概述
  • 视频：7-2 认识 Redux (08:31)
  • 视频：7-3 跟着官方文档学习 Redux（上） (09:2\ Q 36)
  • 视频：7-4 跟着官方文档学习 Redux（中） (09:47)
  • 视频：7-5 跟着官方文档学习 Redux（下） (11:05)
  • 视频：7-6 通过官方demo学习 Redux (11:15)
  • 视频：7-7 使用 React-Redux 优化计数器应用程序（上） (11:07)
  • 视频：7-8 使用 React-Redux 优化计数器应用程序（下） (09:39)
  • 视频：7-9 通过 redux-thunk 了解 Redux 中间件（O F ; @上） (08:5T x , E 4 = Z9)
  • 视频：7-10 通过 redux-thunk 了解 Redux 中间件（下） (18:25)
  • 图文：7-11 讨论题：关于 Redux 的常见面试题
• 第8章 使用 Mobx 实现应用状态管理11 节 | 104分钟本章将会介绍 React 生态中常用的第三方* U = q状态管理方案 Mobx 的核心思想、配套工具% L R ` V及o ! | B 1 9 j使用方式。
  • 图文：8-1 本章概述
  • 视频：8-2 认识 Mobx (03:26)
  • 视频：8-3 学习 Mobx 核心 API 及其设计理念（上） (12:31)
  • 视频：8-4 学习 Mobx 核心 API 及其设计理念（下– d J） (11:06)
  • 视频：8-5 使用8 Q Q q R Hooks 实现搜索推广页弹窗Q D 0 W / Q组件（上） (12:14)
  • 视频：8-6 使用 Hooks 实现搜索推广页弹窗组件（下） (10:33)
  • 视频：8-7 使用 Mobx + mobx-react 实现慕t 4 E d g O课营销平台的状态管理（上） (17:31)
  • 视频：8-8 使用 Mobx + mobx-react 实现慕课营销平台的状态管理（中） (1c ] * *2:04)
  • 视频：8-9 使用 Mobx + mobx-react 实现慕课营销平台的状态管理（下） (19:36)
  • 视频：8-10 本章小结 (04:05)
  • 图文：8-11 讨论题：关于 Mobx 的常见面试题
• 第9章 Redux 和 Mobx 原理解Q 0 z A Y T G析8 节 | 97分钟本章将会介绍Redux 和Mobx 的内部运行机制，核心内容包@ A t 7 m + b ) N括 a. Redux 和Mobx 内部如何维护state并监听state的变化 b. state发生变化后，Redux_ X 1 T k F 和Mobx 如何让view 层进行更新渲染 c. react-redux和mobx-react中Provider组件I 4 V |的实现原理
  • 图文：9-1 本章概述
  • 视频：9-2 观察者模式及其应用分析 (23:00)
  • 视频：9-3 redux与react-redux源码中的核心技术点分析（上） (13:34)
  • 视频：9-4 re| P : t , C t ? zdux与react-redQ ~ S 8 4 * b p Bux源码中的核心技术点分析（下） (22:48)
  • 视频：9-5 mobx与mobx-react 源码中的核心技术点分析（上） (20:24)
  • 视频：9-6 mobx与mobx-react 源码中的核心技术点分析（下） (10:20)
  • 视频：9-7 本章小结 (06:28)
  • 图文：9-8 扩展：聊一聊 React Hook
• 第10章 课程总结2 节 | 19L . Y x a ( C分钟本章将会介绍本门课程做一个整体的总结。
  • 视频：10-1 课程总结 (13:01)
  • 视频：10-2 补充：Uncaught Error- MobX injector- Store ‘store’ is not available (05:53)

文件目录：