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

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

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

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

课程目录:

  • 第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 n7-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 ` Vo ! | 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)

文件目录:

基于React + ReduxMobx搞定大型复杂项目的状态管理完结无秘
│ ├─mukeadpromotion-master.zip 1.42MB
│ ├─第10章 课程总结
│ │ ├─10-1 课程总结.mp4 57.45MB
│ │ └─10-2 补充:Uncaught Error- MobX injector- Store ‘store’ is not available.mp4 33.24MB
│ ├─第1章 了解互联网广告营销业务及其背后的技术
│ │ ├─1-1 导学(课程简介).mp4 56.87MB
│ │ ├─1-2 课程大纲及学7 v a R # W , @习路线.u + Bmp4 35.77MB
│ │ └─1-3 互联网广告及其背后的技术.mp4 33.88MB
│ ├─第2章 从零到一完成前端工o W t ! E程架构之基础篇
│ │ ├─2-1 本章概述.pdf 345.42KB
│ │ ├─2-10 前端路由M 7 # [ H React Router 相关配置-下.mp4 47.37MB
│ │ ├─2-11 基础组件库 antd 相关配置.mp4 31.34MB
│ │ ├─2-12 本章小结.mp4 3.4MBV % I a R & %
│ │ ├─2-2 初始化一个Reactg 1 8 . a ]前端工程(上).mp4 54.26MB
│ │ ├─2-3 初始化一个React前端工程(下).mo h P P S ! H C @p4 101.32MB
│ │ ├─2@ z v-4 扩展:使用 Create ReacW a Q w O Z 2 Kt App 创建工程并修改其x H z ? m l N O工程配置.pdf 354.13KB
│ │ ├─2-5 giN & o } Bt提交规范.mp4 4G D ) \ j t &7.94R ; \ k 7 Y B gMB
│ │ ├─2-6 eslint相关配置.mp4 44.39MB
│ │ ├─2-7 Typescript相关配置.mp4 84.36MB
│ │ ├─2-P / q8 前端路由 React Router 相关配置-上.mp4Y ? % 13.94MB
│ │ └─2-9 前端路由 React Router 相关配置-中.mp4 64.46MB
│ ├─第3章 从零到一完成前端工程架构之进阶篇
│ │ ├─3-1 本章概述.pdf 352.08KB
│ │ ├─3-10 前端工程R O b O m j开发代码工具库配置(下).mp4 36.6MB
│ │ ├─3-11 本章j ^ K w ) a m 1 G小结.mp4 4.26MY Y % ] T ] b z @B
│ │ ├─3-2 js 与 css 文件打包分离.mp4 74.98MB
│ │ ├─3-3 扩展:UmiJS.pdf 381.43KB
│ │ ├─3-4 本地mock配置(上).mr 7 D N p *p4 81.29MB
│ │ ├─3-5 本地mock配置b \ u H # % z W(下).mp4 45.9MB
│ │ ├─3-6 远程 mock 配置(上).mp4 5g ) 8 q # 9 t ^6.32I ; l + V # [MB
│ │ ├─3-7 远& J Q B { 7 a程 mock 配置(下).mp4 66.97MB
│ │ ├─3-8 前端工程性能优化(本小节留有课后作? 2 X业).mp4 86\ @ P.22MB
│ │ └─3-9 前端工程开发代码工具库配置(上).mp4 77.31MB
│ ├─第4章 慕课营销平台页面开发
│ │ ├─4-1 本! y D章概述.pdf 309.11KB
│ │ ├─4-10 PromotionCard 组件开发(上).mp4 74.91MB
│ │ ├─4-11/ l k ~ PromotionCard 组件开发(下).mp4 37.24MB
│ │ ├─4-12 ProB { w c 6ductCard 组件开发.mp4 50.12MB
│ │ ├─4-13 Account 组件开发.mp4 55.05MB
│ │ ├─4-14 本章小结.mp4 18.21MB
│ │ ├─4-15 扩展:React 类组件、函数组件及高阶组件.pdf 377.87KB
│ │ ├─4-2 页K D U r * 0面布局与组件设计(上).mp4 27.9MB
│ │ ├─4-3 页面布局与组件设计(中).mp4, y D * . # 8 72.37MB
│ │ ├─4-4 Header 组件开发(上).mp4 102.05MB
│ │ ├8 d ( b j j G─4-5 页面布局与组件设计(下).mp4 61.54MB
│ │ ├─4-6 Header 组件x { \ z #开发(下4 0 5 ; % 2 @ Q D).mp4r L v k H m t , 82.37MB
│ │ ├─4-7 DataTrend 组件开发(上).mp4 81.71MB
│ │ ├─4-8 DataTrend 组件开发(中).mp4 66.82MB
D 8 + │ └W , O : ;─4-9 DataTreK / k – + d end 组件开发(下).mp4 52.81MB
│ ├─第5章 慕课营销平台搜索推广页面开发
│ │ ├─5-1 本章概述.pdf 311.75KB
│ │ ├─5-10 UserPortrait 组件开发及 Footer 组件复用.mp4 111.6` + 5 } | J $ c4MB
│ │ ├─5-11 UserPortrait 组件开发及 FooM T W z & $ |ter 组件复用.mp4 111.63MB
│ │ ├─5-12 本章小结.mp4 13.01MB
│ │ ├─5-2 搜索推广页面布局与组件设计(上).mp4 86.12MB
│ │ ├─5-S K J V3 搜索推广页面布局与组件设计(下).mp4 54.81MB
│ │ ├─5-4 Header 及 DataTrend 组件复用(上).mp4 77.07MB
│ │ ├─5-5 Header 及s ; I v 2 DataTre/ q \ L \ Snd 组件复用(下).mX 4 $ . ] j : 1p4 67.61MB
│ │ ├─5-6 搜索推广页 Account 组件. Z D r ~开发.mp4 77.26MB
│ │ ├─5-7 WaveAnalysis 组件开发(上).mp4 68.67MB% r f * O
│ │ ├─5-8 WaveAn4 D \ 0alysis 组件开发(中).mp4 90.15MB
│ │ └─5-9 WaveAnalysis 组件开发(下).mp4 99.74MB
│ ├─第6章 使用 React Context 实现应用状态管理
│ │ ├─6-1 本章概述.pdf 341.15KB
│ │ ├─6-2 React 中的状态管理.mp4 7.86MB
│ │ ├─6-3 认识 React Context.mp4 86.56MB
│ │ ├─6-4 使用 React Context 实现公共状态管理(上).mp4 124.21MB
│ │ ├─6-5 使用 React Context 实现公共状态管理(下).mp4I t = \ + y + C 4 25.83MB
│ │ ├─6-6 前端工程性能优化(上).mp4 34.13MB
│ │ ├─6-7 前端工程性能优化(下).mp4 89.04MB
│ │ └─6-8 本章小结.mp4 13.03MB
│ ├─第7章 使用 Redux 实现应用状态管理
│ │ ├─7-1 本章概述.pdf 326.96KB
│ │ ├─7-10 通过 redux-thunk? V J P m q L K 了解7 ; , k X B } $ Redux 中间件(下).mp4 103.75MB
│ │ ├─7-2 认识 Redux.mp4 18.13MB
│ │ ├─7-20 讨论题:关于 Redux 的常见面试题.pdf 344.3KB
│ │ ├─7-3 跟着官方文档学习 Redux(上).mp4 52.5) # | J o Y / \8MB
│ │ ├─7-4 跟着官方文档学习 Redux(中).mp4 54.56MB
│ │ ├─7-5 跟着官方文档学习 Redux(下).mp4 54.58MB
│ │ ├─7-6 通过官方demo学习 Redux.mp4 63.42MB
│ │ ├─7-7 使用 React-Redux 优化计数器应用程序(上).mp4 78.38MB
│ │ ├─7-8 使用 React-Redux 优化计z c N s n y f数器应用程序(下).mp4 50MB
│ │ └─7-9 通过 redux-thunk 了解 Redux 中间件(上).mp4 47.99MB
│ ├─第8章 使用 Mobx 实现应用状态管理
│ │ ├─8-1 本章概述.pdf 327.94K/ ` . v G = kB
│ │ ├─8o ; c % { C y @ |-10 本章小结.mp4 18.51MB
│ │ ├─. m . 9 j i M8-11 讨论题:关于 Mobx 的常见面试题.pdf 377.z s } ;87KB
│ │ ├─8-2 认识 Mobx.mp4 6.92MBB _ [ c C U ! l
│ │ ├─8-3 学习 Mobx 核心 API 及其设计理念(上).mp4 80.55MB
│ │ ├─8-4 学习 M7 S B @obx 核心 API 及e 9 U a F ? (其设计理念(下).mp4 44r = , p.28MB
│ │ ├─8-5 使用 Hooks 实现搜索推广页弹窗组件(上).mp4 113.41MB
│ │ ├─8-6 使用 Hooks 实现搜索推广页弹窗组件(下).mp4 54.58MB
│ │ ├─8-7i 4 q 使用 Mobx + mobx-reE q Pact 实现慕课营销平台的状态管理(上).mp4 101.62MB
│ │ ├─8-8 使用 Mobx + mobx-react 实现慕课营销平台的状态管理(中).mp4 68.42MB
│ │ └─8-9 使用 Mobx + mobx-react 实现慕课营销平台的状态管理(下).mp4 107.13MB
│ └─第9章 Redux 和 Mobx 原理解析
│ ├─9-1 本章概述.pdf 312.38KB
│ ├─t ) v ] j 79-2 观察者模式及其应用分析.mp4 138.57MB
│ ├─D d $9-3 redux与react} } ^ D T Y-redux源码中的核心技术点分析(上).mp4 109.24MB
│ ├─9-4 re/ C d s b r 4dux与react-redux源码中的核心技术点分析(下).mp4 125.31MB
│ ├─9-5 mobx与mobx-react 源码中的核心技E S E i术点分析(上).mp4 117.33MB
│ ├─9-6 mobx与mobx-reacN O o C Z n , Xt 源码中o A e ^ ( g \ }的核心技术点分析(下).mp4 56.83MB
│ ├─9-7 本章小结.mp4 20.35MB
│ └─9-8 扩展:聊一聊 React Hook.pdf 377.29KD A ` g @ sB
  • wechat

    朋友圈不定时发福利(开通会员免费获取资源)

  • 微信号

    5702701

    点击我自动复制
资源失效反馈地址
基于React + Redux/Mobx搞定大型复杂项目的状态管理|完结无秘-51自学联盟
基于React + Redux/Mobx搞定大型复杂项目的状态管理|完结无秘
此内容为付费资源,请付费后查看
会员专属资源
您暂无购买权限,请先开通会员
开通会员
付费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容