你好同学,我是一本老少咸宜的《React源码通关指南》。
你可以根据自己的水平,结合希望达到的深度,再考虑愿意付出的时间,跟着本指南做几道选择题,我会给你一份适合你的源码学习路径。
React
有初步了解。跳到问题2
React
,使用React
开发过应用。跳到问题3
跳到答案1
Hooks
的实现原理),可以在开发时更好的掌控React
。跳到答案2
Hooks
的实现原理),可以在开发时更好的掌控React
。跳到答案2
跳到答案3
推荐你阅读build-your-own-react[1],并动手实现。
当你完成学习,可以实现一个包含时间切片
、fiber架构
、Hooks
的简易React
。
最重要的是,这个简易版与真实的React
运行流程类似。
首先完成答案1的学习。接下来我们将进入React
真实源码的学习。
这里我们用到的教材是开源电子书React技术揭秘[2]。
首先学习理念篇[3],了解React
设计理念。
如果要理解Hooks
的实现原理,阅读极简useState实现[4]。
如果要理解状态更新
相关实现(比如ReactDOM.render
、this.setState
、useState
),阅读完架构篇[5]后阅读状态更新[6]。
要理解Diff
算法的实现,阅读完架构篇[7]后阅读Diff算法[8]。
要深入理解框架的运行流程,达到能给React
提PR
,或自己开发框架的水平,我们需要彻底了解React
的理念,架构以及API的实现。
在此过程中,需要你动手跟着电子书一起debug代码。
[1]
build-your-own-react: https://pomb.us/build-your-own-react/
[2]
React技术揭秘: http://react.iamkasong.com/
[3]
理念篇: https://react.iamkasong.com/
[4]
极简useState实现: https://react.iamkasong.com/hooks/create.html
[5]
架构篇: https://react.iamkasong.com/process/reconciler.html
[6]
状态更新: https://react.iamkasong.com/state/prepare.html
[7]
架构篇: https://react.iamkasong.com/process/reconciler.html
[8]
Diff算法: https://react.iamkasong.com/diff/prepare.html