本文章是学习了 @阿崔cxr 的mini-react后做笔记,目的有三:

一是巩固知识,将所学知识输出为文章; 二是差缺补漏,在写文章过程中来检查代码中是否有不理解的地方; 三是分享,学习完mini-react后对于react有了更深的理解,而且实现思路也十分巧妙。

在这篇文章中,能收获到如何去实现一个简单的react、react的更新逻辑、性能优化、理解useState、理解useEffect等。

其中配合画图理清思路、断点调试代码、拆分功能用小步走的方式却实现功能,可以更好的去理解代码逻辑与整体架构。

代码仓库:https://github.com/Cuimc/mini-react

mini-react的实现

实现使用vdom渲染dom

理解jsx设计

实现任务调度器与fiber架构

实现function component的渲染

实现事件的绑定

更新props

实现更新中的创建与删除

性能优化—减少不必要的计算

实现useState

实现useEffect

useState小记 — 一个浅拷贝引发的bug