learning by doing,通过实现一个简单的react-v16来学习react
很多同学都尝试学习过源码,背后的原因多种多样,有兴趣驱动,技术驱动,坑驱动,或者只是想获得一份比较满意的offer。
另外有很重要的一点是,这些机制的内部实现从工程角度来看也具有广泛的吸引力。源码中有如此丰富的知识可以帮助我们成长为更好的开发者。
而上来直接啃源码会稍稍有些难度,所以有些同学会去先去看一些源码解析的文章,然而最有效的方法莫过于learning by doing,通过逐步实现react来学习
主要针对web端: 目前react是拆分成了多个package,因为只针对web端,所以会重点分析react,react-dom,react-reconciler这三个包
文中代码做了很多简化: 去掉了一些错误处理,性能分析(Profiler API),服务器端渲染等等我不关心的功能,因为这对从来没有深入过 React 源码的同学来说过于复杂。
可能与源码差异较大: 为了方便理解,有时候会来一些简单粗暴的实现,在之后会纠正过来
代码托管在stackblitz.com: 我会在每一节放上代码的链接,可以对照着阅读
- element
- component
- fiber 树
- dom渲染
- 更新机制 - 协调算法
- 事件机制
- hooks
- suspense
- 代码小技巧