这门课解决什么问题
很多前端开发者在写 React 时,常卡在状态管理和组件复用上。组件层级一深,数据传递就乱;用 Hooks 写副作用逻辑,容易出现重复渲染或闭包陷阱;上了 Redux 又觉得模板代码太多,不知道怎么拆分 store。这门课针对的就是这些实际工程里的痛点,重点讲 Redux 和 Hooks 怎么配合用,帮你把复杂业务的状态逻辑理顺,而不是停留在写几个独立组件的水平。
适合什么基础,建议先看哪几块
这门课要求你至少能看懂 JavaScript 基本语法,写过简单的页面交互。资料里开头放了 ES6 的 class、继承、展开运算符、数组迭代方法(map、filter、some、every)这些内容,不是凑数——如果你对这些概念还模糊,建议先从这里看起,因为 React 的组件思想和数据处理大量依赖它们。如果你 ES6 基础已经扎实,可以直接跳到 Hooks 和 Redux 部分,但别跳过数组迭代那几节,后面写 reducer 时会反复用到。
学完能独立做什么,资料怎么配合练习
学完之后,你应该能独立搭建一个中等复杂度的 React 应用:用函数组件和 Hooks 管理本地状态和副作用,用 Redux 处理跨组件的全局状态,把页面拆成可复用的组件并合理组织目录结构。具体来说,能做一个带数据请求、列表筛选、详情跳转、状态共享的功能模块,而不是只能照着 demo 抄一遍。
资料配合练习的方式建议这样:先看一遍视频理解概念,但不要只看不动手。每看完一个章节,自己建一个本地项目,把课里的示例代码手敲一遍,然后改一改数据结构或交互逻辑,看页面表现是否符合预期。特别是 Hooks 的 useEffect 和 Redux 的 reducer 部分,光看视频很难真正理解执行时机和数据流向,必须自己跑一遍、加 console.log 打印中间状态,才能发现问题在哪。遇到报错先自己查文档和报错信息,别急着翻答案,这是建立调试能力的关键环节。
掌握本课程后,将能够熟练运用React框架构建高效、可扩展的前端应用,解决复杂项目中的组件化和状
课程目录
* 01 学习React之前必须要了解的JavaScript/
* 01 JavaScript构造函数.mp4 (29.32 MB), 07:27
* 02 ES6 class关键字创建类.mp4 (26.75 MB), 06:13
* 03 class类继承.mp4 (12.28 MB), 02:56
* 04 ES6展开运算符.mp4 (23.14 MB), 05:10
* 05 ES6数组迭代方法map.mp4 (12.40 MB), 03:26
* 06 ES6数组迭代方法filter.mp4 (6.82 MB), 01:56
* 07 ES6数组迭代方法some.mp4 (15.96 MB), 03:55
* 08 ES6数组迭代方法 every.mp4 (9.83 MB), 02:40
* 09 ES6数组迭代方法reduce.mp4 (20.59 MB), 05:33
* 10 ES6解构赋值.mp4 (15.05 MB), 03:30
* 11 箭头函数中的this指向.mp4 (9.49 MB), 02:59
* 02 React基础入门/
* 01 React简介.mp4 (26.45 MB), 06:05
* 02 Hello React开启你的React之旅.mp4 (17.27 MB), 03:51
* 03 React组件化开发.mp4 (31.63 MB), 07:22
* 04 渲染书籍列表案例.mp4 (15.10 MB), 03:21
* 05 计数器案例.mp4 (27.94 MB), 06:01
* 06 JSX语法详解.mp4 (30.48 MB), 07:11
* 07 JSX中嵌入表达式.mp4 (13.66 MB), 03:33
* 08 JSX绑定属性.mp4 (15.63 MB), 03:41
* 09 动态设置class属性.mp4 (21.89 MB), 04:29
* 10 绑定this的3种方法.mp4 (20.34 MB), 04:02
* 11 事件参数传递.mp4 (23.04 MB), 05:25
* 12 菜单排他案例.mp4 (35.88 MB), 07:36
* 13 React条件渲染.mp4 (15.79 MB), 03:56
* 14 React列表渲染.mp4 (20.74 MB), 04:34
* 03 React脚手架应用/
* 01 安装create-react-app脚手架.mp4 (14.44 MB), 03:15
* 02 React脚手架项目目录结构及作用.mp4 (14.79 MB), 03:30
* 03 React脚手架渲染Hello React.mp4 (35.77 MB), 07:27
* 04 React函数组件的定义及使用.mp4 (15.77 MB), 04:04
* 04 生命周期/
* 01 认识react生命周期.mp4 (8.97 MB), 03:25
* 02 componentDidMount生命周期函数的应用.mp4 (25.58 MB), 05:32
* 03 componentDidUpdate生命周期函数的应用.mp4 (34.35 MB), 07:02
* 05 组件通信/
* 01 组件嵌套.mp4 (27.29 MB), 06:37
* 02 父组件向子组件传递数据.mp4 (20.94 MB), 04:34
* 03 prop-types数据类型校验.mp4 (20.32 MB), 04:00
* 04 子组件向父组件传递数据.mp4 (55.90 MB), 11:10
* 05 组件通信选项卡案例.mp4 (52.78 MB), 10:33
* 06 children子元素模拟插槽.mp4 (12.66 MB), 03:04
* 07 props 模拟具名插槽.mp4 (11.58 MB), 02:30
* 08 模拟作用域插槽.mp4 (35.85 MB), 07:41
* 09 Context数据传递.mp4 (23.60 MB), 05:26
* 10 事件总线EventBus.mp4 (36.09 MB), 08:20
* 06 React组件化开发/
* 01 setState的作用以及用法.mp4 (13.87 MB), 03:05
* 02 组件性能优化shouldComponentUpdate.mp4 (21.44 MB), 05:14
* 03 组件性能优化PureComponent.mp4 (7.56 MB), 01:52
* 04 函数组件性能优化.mp4 (15.52 MB), 03:31
* 05 组件中state数据不可变性原则.mp4 (28.14 MB), 05:52
* 06 ref获取DOM的3种方式.mp4 (32.47 MB), 06:35
* 07 ref获取组件.mp4 (13.63 MB), 03:04
* 08 受控组件与非受控组件.mp4 (40.67 MB), 08:36
* 09 Checkbox受控表单组件单选应用.mp4 (27.21 MB), 05:17
* 10 Checkbox受控表单组件多选应用.mp4 (44.22 MB), 07:51
* 11 Select受控表单组件单选应用.mp4 (21.16 MB), 03:57
* 12 Select受控表单组件多选应用.mp4 (38.15 MB), 06:47
* 13 React高阶组件.mp4 (27.50 MB), 06:03
* 14 高阶组件的应用场景.mp4 (19.65 MB), 03:42
* 15 高阶组件应用案例.mp4 (27.85 MB), 04:49
* 16 Portals的应用.mp4 (16.23 MB), 03:13
* 07 React动画/
* 01 react-transition-group动画库.mp4 (40.19 MB), 07:32
* 02 CSSTransition生命周期函数.mp4 (17.85 MB), 02:54
* 03 SwitchTransition动画.mp4 (28.82 MB), 05:53
* 04 TransitionGroup列表动画.mp4 (47.65 MB), 08:41
* 05 在React中如何引入CSS.mp4 (23.98 MB), 04:36
* 06 CSS文件引入.mp4 (7.44 MB), 01:40
* 07 CSS Module模块化.mp4 (9.12 MB), 02:06
* 08 CSS in JS.mp4 (20.93 MB), 04:34
* 09 styled-components的数据传递和动态样式.mp4 (20.84 MB), 04:13
* 10 动态添加className属性.mp4 (24.06 MB), 04:17
* 08 Redux/
* 01 什么是redux.mp4 (22.29 MB), 06:15
* 02 Redux定义初始化数据及数据获取.mp4 (14.10 MB), 03:48
* 03 Redux修改数据.mp4 (45.12 MB), 10:50
* 04 订阅和取消订阅.mp4 (35.10 MB), 07:46
* 05 调用函数生成action对象及代码分离.mp4 (28.81 MB), 06:01
* 06 react脚手架项目使用redux.mp4 (103.96 MB), 21:34
* 07 react-redux库获取数据.mp4 (38.11 MB), 08:04
* 08 react-reduc库修改数据.mp4 (27.04 MB), 05:33
* 09 Redux异步请求数据.mp4 (67.30 MB), 12:19
* 10 reduce-thunk中间件的应用.mp4 (41.26 MB), 07:47
* 11 Redux模块拆分.mp4 (38.10 MB), 06:47
* 09 路由/
* 01 路由的基本应用.mp4 (43.54 MB), 07:55
* 02 NavLink的应用.mp4 (19.41 MB), 03:15
* 03 Navigate 重定向导航组件.mp4 (13.44 MB), 02:20
* 04 配置Not Found页面.mp4 (14.37 MB), 02:31
* 05 嵌套路由.mp4 (37.70 MB), 06:20
* 06 链式路由跳转.mp4 (23.58 MB), 04:29
* 07 在class组件中使用useNavigate.mp4 (33.39 MB), 05:42
* 08 动态路由参数传递.mp4 (54.16 MB), 08:59
* 09 路由查询参数传递.mp4 (17.23 MB), 03:16
* 10 抽离路由匹配规则模块.mp4 (37.87 MB), 06:23
* 10 Hooks/
* 01 useState实现计数器案例.mp4 (65.35 MB), 10:35
* 02 useState实现状态切换.mp4 (26.32 MB), 04:56
* 03 Redux Hook.mp4 (43.84 MB), 07:53
* 04 useEffect Hook.mp4 (28.13 MB), 04:47
* 05 useContext Hook.mp4 (26.33 MB), 04:43
* 06 useRef Hook.mp4 (18.65 MB), 03:44
* 07 useLocalStorage Hook.mp4 (31.50 MB), 05:51
* 11 项目开发/
* 01 项目创建.mp4 (27.77 MB), 04:56
* 02 配置路由模块.mp4 (41.29 MB), 07:12
* 03 封装axios.mp4 (27.00 MB), 04:38
* 04 Header区域样式开发.mp4 (20.98 MB), 04:31
* 05 首页Banner区域和广告区域样式布局.mp4 (39.70 MB), 07:09
* 06 商家推荐区域和产品中心区域样式布局.mp4 (17.21 MB), 02:36
* 07 Footer区域样式开发.mp4 (15.02 MB), 02:34
* 08 产品列表页面布局.mp4 (23.16 MB), 04:19
* 09 发送网络请求,获取服务器首页数据.mp4 (64.20 MB), 09:54
* 10 服务器数据渲染.mp4 (26.37 MB), 04:01
* 11 父组件向子组件传值(一).mp4 (35.79 MB), 05:21
* 12 父组件向子组件传值(二).mp4 (48.31 MB), 07:07
* 13 渲染产品列表数据.mp4 (76.06 MB), 11:13
* 14 价格排序.mp4 (38.50 MB), 06:03
* 15 价格排序.mp4 (52.76 MB), 08:03
* 16 获取产品详情查询参数.mp4 (38.81 MB), 06:26
* 17 根据产品id获取详情.mp4 (34.87 MB), 05:29






