课程介绍
React是Facebook开发的一个用于构建用户界面的JavaScript库,React18是该库的一个版本。一个“从零实现React18”的课程可能会教授学生如何从基础开始,逐步构建出类似于React18的前端库。这样的课程包括以下几个方面:
- React基础和核心概念:
- 虚拟DOM(Virtual DOM)
- 组件(Components)
- JSX
- 状态管理(State Management)
- 生命周期(Lifecycle Methods)
- 高级特性:
- 钩子(Hooks),如useState和useEffect
- 上下文(Context)API
- 异步渲染(Concurrent Mode)
- 新的生命周期方法(如getDerivedStateFromProps)
- 构建自己的React库:
- 设计和实现自己的虚拟DOM算法
- 创建自己的组件系统
- 状态管理和生命周期的实现
- 钩子系统的实现
- 性能优化:
- 使用React Dev Tools进行性能分析
- 利用React的各种优化技巧(如memoization、lazy loading等)
- 测试和部署:
- 编写单元测试和集成测试
- 使用诸如Jest和React Testing Library的工具
- 配置构建和部署流程
- 与现代工程实践结合:
- 使用TypeScript进行类型安全的开发
- 集成状态管理库,如Redux或MobX
- 路由管理,如使用React Router
课程通过项目实战的方式,让学生亲自动手实现一个简化版的React库,从而加深对React工作原理的理解。这种类型的课程非常适合有一定编程基础,希望深入学习React内部机制的开发者。
课程目录
/13-003-B站卡颂从0实现React18/
│├─0.课程介绍.mp4
│├─1.第一课:搭架子(2022-11-25 15-46-23).mp4
│├─10.第十课:初探update流程.mp4
│├─11.「1」搭建项目架构.mp4
│├─12.「2-1」实现JSX.mp4
│├─12.「2-2」JSX转换—实现JSX的打包.mp4
│├─13.「2-3」JSX转换—实现第一种调试方式.mp4
│├─14.「4-1」如何触发更新—实现状态更新机制.mp4
│├─15.「4-2」如何触发更新—接入状态更新机制.mp4
│├─16.「5-2」初探mount流程—实现completeWork.mp4
│├─17.「6-2」初探ReactDOM—实现Mutation子阶段.mp4
│├─18.「6-3」初探ReactDOM—实现ReactDOM.mp4
│├─19.「6-4」初探ReactDOM—调试ReactDOM.mp4
│├─2.第二课:-小试牛刀(2022-11-25 15-46-21).mp4
│├─20.「7-2」初探FC—实现第二种调试方式.mp4
│├─21.「8-2」实现useState—实现useState.mp4
│├─22.「9-2」ReactElement的测试用例—测试ReactElement.mp4
│├─23.「10-2」初探update流程—处理commit阶段.mp4
│├─24.「10-3」初探update流程—处理useState.mp4
│├─25.「11」实现事件系统.mp4
│├─26.「12-1」实现Diff算法—单节点Diff.mp4
│├─27.「12-2」实现Diff算法—多节点Diff.mp4
│├─28.「12-3」实现Diff算法—处理commit阶段.mp4
│├─29.「13」实现Fragment.mp4
│├─3.第三课:-初探Reconciler(2022-11-25 15-46-24).mp4
│├─30.「14-1」批处理的概念.mp4
│├─31.「14-2」实现Lane模型.mp4
│├─32.「14-3」实现调度阶段.mp4
│├─32.「14-4」改造更新流程.mp4
│├─33.「15-1」实现useEffect数据结构.mp4
│├─34.「15-2」实现useEffect工作流程.mp4
│├─35.「16-1」实现noop-renderer.mp4
│├─36.「16-2」打包noop-renderer.mp4
│├─37.「16-3」测试useEffect.mp4
│├─38.「17-1」实现同步更新Demo.mp4
│├─39.「17-2」实现并发更新Demo.mp4
│├─4.第四课:如何触发更新?(2022-11-25 15-46-26).mp4
│├─40.「18-1」实现并发更新的交互部分.mp4
│├─41.「18-2」实现并发更新的策略逻辑.mp4
│├─42.「18-3」实现并发更新的状态计算.mp4
│├─43.「19-1」useTransition的作用.mp4
│├─44.「19-2」实现useTransition.mp4
│├─45.「20」实现useRef.mp4
│├─46_「21-1」实现Context数据结构.mp4
│├─47_「21-2」实现Context逻辑.mp4
│├─48_「21-3」实现useContext.mp4
│├─49_「22-1」Suspense的作用.mp4
│├─5.第五课:实现首屏渲染(2022-11-25 15-46-27).mp4
│├─50_「22-2」Suspense的实现思路.mp4
│├─51_「22-3」实现Suspense工作流程.mp4
│├─52_「22-4」如何触发Suspense?.mp4
│├─53_「22-5」实现试验性hook-——-use.mp4
│├─54_「22-6」实现unwind流程.mp4
│├─55_「22-7」完善Suspense.mp4
│├─6.第六课:初探ReactDOM(2022-11-25 15-46-28).mp4
│├─7.第七课:初探FC与实现第二种调试方式.mp4
│├─8.第八课:实现useState.mp4
│├─9.第九课:ReactElement的测试用例.mp4
│├─源码
源码/
│├─big-react-master.exe
![[衡天云]爆款云服务器 低至12元/月](/hty.png)