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

admin · 发表于 2022-5-18 00:02:51

课程目标

            透彻掌握 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章  慕课营销平台搜索推广页面开发
                  本章将会介绍慕课营销平台搜索推广页面的开发，重点介绍如何做页面中组件及代码的复用，如何做到代码开发的高效与可维护。
                                                                                                                                                                                                                                                                                    查看完整目录








                  每个IT资源网课程，都是一个专业的技术社区
                  个性化增值服务，学习有保障更高效



                        答疑专区+技术社区
                        连百度谷歌都搜不到的问题，在这里讲
师都将耐心详细解答，更有小伙伴一起
交流互动，共同进步。



                        课程全套代码下载
                        提供课程全套源代码下载，包含：
全套组件封装镜像、私有仓库、各个服
务的镜像、项目源代码。





                        独家“动态”教辅材料
                        丰富的专属教辅资料上传更新，通过
课程教案、原理图解、技术文档、演示案
例等各种教材，保障你的学习效果。



                        实用图文资料
                        部分简单内容以图文形式呈现，与视频
相配合，既保障学习效果，又提高了学
习效率。