获取资料

Mini-React完整训练营 实现任务调度+Fiber架构+Hooks机制全流程开发+项目实战

Mini-React完整训练营 实现任务调度+Fiber架构+Hooks机制全流程开发+项目实战

课程介绍

本课程由前端资深架构师 崔效瑞 倾力打造,专为希望深入掌握 React 原理、源码和底层架构的开发者设计。

通过本训练营,你将从零手写实现一个完整的 mini-react 框架,在实战中深入理解 React 的 Fiber 架构、任务调度、diff 算法、事件绑定、props 更新机制、以及 Hooks(useState、useEffect) 的底层实现原理,并完成一个 Todo List 应用,打通理论到实践的全链路。

课程亮点:

从零开始手写最简 mini-react 并支持 JSX

实现任务调度器和 Fiber 架构原理剖析

还原 function component 渲染与更新流程

深入实现 diff 算法及优化更新性能

完整实现 useState、useEffect 等 Hooks

项目实战:基于 mini-react 实现 Todo List 应用

适合人群:

熟悉 React 开发、有意进阶底层原理的前端开发者

希望掌握 Fiber 架构和 Hooks 内部机制的工程师

有志于构建自主前端框架或提升源码阅读能力的开发者

课程目录

(1)\1;目录中文件数:4个

01-实现最简 mini-react .mp4

02-使用 jsx .mp4

扩展-使用 vitest 做单元测试.mp4

扩展-自定义 react的名字.mp4

(2)\2;目录中文件数:3个

3. 实现任务调度器.mp4

4. 实现 fiber 架构.mp4

code.exe

(3)\3;目录中文件数:4个

5. 实现统一提交.mp4

6. 实现 function component.mp4

7. 重构 function component.mp4

code.exe

(4)\4;目录中文件数:3个

10. 重构 update props .mp4

8. 实现事件绑定.mp4

9.update props.mp4

(5)\5;目录中文件数:4个

1. diff-更新 children.mp4

2. diff-删除多余的老节点.mp4

3. 解决 edge case 的方式.mp4

4. 优化更新 减少不必要的计算.mp4

(6)\6;目录中文件数:3个

1. 实现 useState.mp4

2-批量执行 action.mp4

3-提前检测 减少不必要的更新.mp4

(7)\7;目录中文件数:3个

1. 实现 useEffect.mp4

2. 实现 cleanup.mp4

3. ending.mp4

(8)\8-todo-list;目录中文件数:4个

01-todos功能展示.mp4

02-todos.mp4

03-todos.mp4

code.exe

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址