首页 实战 基于React + Redux/Mobx搞定大型复杂项目的状态管理
收藏

基于 React + Redux/Mobx 搞定复杂项目状态管理

依托大型广告营销平台项目，多维度讲解 React 状态管理

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

已完结 难度 中级 时长 17小时 学习人数 152 综合评分 8.93
课程已到期
课程已到期

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

上古鹏
讲师

资深前端工程师

课程预览

检测到您还没有关注慕课网服务号，无法接收课程更新通知。请扫描二维码即可绑定
重新观看
课程目标

透彻掌握 Redux 和 Mobx 高级用法， 突破状态管理技术瓶颈

学会 3 大常用状态管理
工具库原理及使用
React Context 、Redux 和 Mobx
三大常用 React 状态管理工具库
深度理解它们各自的核心思想及优缺点
掌握 React 生态
常用技术体系
一门课程搞定React生态所有常用技术：
React，React Router，React Context，
Redux，Mobx，Typescript
训练大型项目的
工程化开发思维
课程项目基于大厂的真实开发流程
融入工程化开发思想及架构设计
训练规范的企业级项目工程化思维
课程亮点

三大常用状态管理工具讲解，让你应对不同场景，学会合理选型

从React官方工具到第三方工具，每种工具原理与典型应用，学个明白

React Context
认识 React Context
使用React Context 向子组件进行状态传播
使用React Context 触发事件改变公共状态
Redux
使用 React-Redux 优化计数器应用程序
通过 redux-thunk 了解 Redux 中间件
了解 Redux 中的异步解决方案
学习 redux-saga使方式
Mobx
Mobx 内部如何维护state并监听state的变化
Mobx 如何让view 层进行更新渲染
mobx-react中Provider组件的实现原理

融入 React 常用技术体系，完成企业级大型项目开发

让状态管理与实际生产相结合，真正将理论知识落地

项目效果图
所涉及的 React 生态技术栈
React 工程搭建
基于webpack中间件的本地mock方案
基于yapi+mongodb的远程mock方案
前端工程性能优化
前端开发流程规范
基于React Router的路由配置方案
基于React Context状态管理开发实战
基于Redux状态管理开发实战
基于require.context的工程目录优化方案
基于Mobx状态管理开发实战
掌握 TypeScript 与 React配合使用的方法

大厂高级前端工程师，带你感受真实企业级项目高效开发全流程

遵循大厂项目开发原则，向更好的开发规范与标准靠近

工程化架构示意
用户
打开
浏览器
路由器解析模块
监听url变化
读取路由配置文件
加载页面组件
页面组件树模块
加载store
加载样式
加载（子）组件
加载工具包
状态管理模块
React Context
Redux 体系
Mobx 体系（推荐）
组件管理模块
基础组件
页面业务组件
公共业务组件
基础能力模块
打包、编译、热更新...
工程性能检查、提升...
Eslint 能力
Typescript 能力
本地 Mock 能力
远程 Mock 能力
... ...
全流程跑通项目
背景了解
需求分析
开发规划
项目发布
功能实现
基础配置
大型商用级项目标准
git提交规范
eslint相关配置
前端路由 React Router 相关配置
基础组件库 antd 相关配置
js 与 css 文件打包分离
本地mock配置
远程 mock 配置
课程大纲
第1章 了解互联网广告营销业务及其背后的技术
互联网广告业务可以说是每个大型互联网公司中的核心业务，广告营销是互联网公司盈利的一个非常重要的方式。本章将会介绍大型互联网公司广告营销方面常用策略及方式，同时介绍广告营销业务背后的核心技术。
第2章 从零到一完成前端工程架构之基础篇
本章将会介绍如何从零到一完成一个前端工程，包括使用webpack初始化一个前端工程，eslint配置，typescript配置，react-router配置，基础组件库antd配置等。
第3章 从零到一完成前端工程架构之进阶篇
一个好的前端工程可以大大提升开发效率，同时提升代码稳定性和规范性。本章将会介绍如何做前端工程架构的优化，包括打包性能优化，打包文件拆分，mock配置等。
第4章 慕课营销平台页面开发
本章将会介绍如何做大型项目页面的开发，体会互联网大厂资深前端工程师在大型项目中页面开发时的思路，包括页面布局与组件设计原则、父子组件的通信机制、如何实现交互复杂的业务组件等。
第5章 慕课营销平台搜索推广页面开发
本章将会介绍慕课营销平台搜索推广页面的开发，重点介绍如何做页面中组件及代码的复用，如何做到代码开发的高效与可维护。
查看完整目录

每个慕课网课程，都是一个专业的技术社区

个性化增值服务，学习有保障更高效

答疑专区+技术社区
连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。
课程全套代码下载
提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。
独家“动态”教辅材料
丰富的专属教辅资料上传更新，通过
课程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。
实用图文资料
部分简单内容以图文形式呈现，与视频
相配合，既保障学习效果，又提高了学
习效率。
适合人群
初入社会的毕业生
1-3 年开发经验的前端开发者
技术储备
Html/Css 基础
基本的 React 知识
JS 交互知识
环境参数
mobx-react ^7.1.0
babel-loader ^8.2.1
ts-loader ^9.2.3
axios ^0.21.1
eslint-config-airbnb ^18.2.1
eslint ^7.30.0
webpack-cli ^4.9.1
webpack ^5.4.0
antd ^4.16.7
typescript ^4.3.5
redux-saga ^1.1.3
redux ^4.1.2
mobx ^6.1.6
react-router-dom ^5.2.0
react-router-config ^5.1.1
"react-dom" "^17.0.1"
react-router ^5.2.0
"react-redux" ^7.2.6
"react" "^17.0.1"

相关推荐
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题？

扫码添加指导老师 1V1 帮助你！

添加后老师会第一时间解决你的问题