推荐10个yyds的Vue 、React源码解析开源项目

大家好，我是Echa。

最近有部分粉丝们私信问小编，如何学习目前市场上非常流行的Vue 和React 开源框架呢？

该怎么入手去学习呢？小编在这里说说自身如何自学Vue 和React。一句话：
阅读优秀的代码的目的是让我们能够写出优秀的代码，更好的理解框架的工作方式。

学习方法如下：

• 模仿学习：借由前端学习路线图，搜集相关前端视频教程，每天跟着老师学，老师怎么教，你就怎么做，这就是模仿学习X。
• 主动学习：学习目标性强，就是想学习前端然后去互联网行业奋斗，这里就可以加入自己的理解，势必要突破老师所讲的内容的界限，而要多多开动自己的脑筋，让代码更优美，让运行更流畅
• 制定严格的计划表：每天学什么、学到什么程度，一定要有一个清醒的认知，最好是做一张表，将自己的时间划分规划好，每天一个大任务，大任务下细化小知识点，完成一项打一个勾，让学习有层次的持续进行，这样做可以避免三天打鱼两天晒网的学习模式。
• 不懂就问：不是有句话嘛，内事不决问百度，外事不决问谷歌，当你遇到问题的时候，第一时间就去百度找答案，利用这种方法，遇到其他非概念性的问题也可以积极发问。
• 勤能补拙：敲代码这个事儿最主要就是熟练，你可以不会那么高阶的技术，但是基础性知识务必要做到熟练，利用自己的勤奋好学去补上技能短板

总之，多看大佬们在github上，gitee 码云上优秀开源的项目，先在本地环境边看官方文档，一步一步部署搭建起来，然后从入口文件逐步断点深挖，实践得出真理，阅读时间长了，实践多了，自然而然就入门了。

另外小编之前文章也发布过相关学习资料，有兴趣的老铁们也看看：

盘点Github上15个火热的Vue3开源项目

盘点12个Vue 3的高颜值UI组件库

推荐13个又热门又实用的Vue开源宝典库

分享15个基于Vue3.0全家桶的优秀开源项目

推荐20个Github热门的React学习宝库及开源项目

前端必读书籍推荐

今天小编给老铁们分享5个Vue源码解析开源和5个React源码解析开源项目，希望对好学的粉丝们有所帮助，如果在学习的过程中遇到任何问题，可以留言私信小编，小编只要有空看到留言，能解决的尽可能的为你们解答，小编是非常乐意为大家服务。接下来跟着小编一起从阅读官方文档开始。


全文大纲

Vue 系列

• Vue3官方文档源码系列
• Vue3 源码解释
• 图解 Vue、Vue-Router、Vuex 源码
• Vue.js 技术揭秘
• Vue源码逐行注释分析

React 系列

• React 技术揭秘
• React的秘密
• 图解React源码
• React源码分析
• React源码系列

Vue3官方文档源码系列

Github：https://github.com/vueClub/vue3doc

在线文档：
https://vue3js.cn/start/


Vue 中文社区提供的 Vue3 源码解析系列文章。

阅读优秀的代码的目的是让我们能够写出优秀的代码


其实就跟我们写作文一样，你看的高分作文越多，写出高分作文的概率就越大


大部分程序员都只会写代码（改，抄，
stackoverflow工程师，代名词: 搬砖），会阅读代码的很少，为什么呢？因为国内所有的教育，网课，培训都没有教你怎么去看代码，只教你怎么去写代码


再者基于现在的程序员工作模式(模块化开发，只需要拿到需求做自己的部分)，别说看源码，甚至就连项目里的代码都懒的去看，我认识的很多程序员就是这样的，一个项目摸了两三年，你要问他项目中
webpack都干了哪些事情，他的回答是不知道，反而趾高气扬的告诉你，那些他从来都用不上，看了也没什么用，也看不懂，这里省略内心千字脏文

如下图：

Vue3 源码解释

在线文档：
https://kingbultsea.github.io/vue3-аnalysis/book/index.html

流程图：https://www.processon.com/view/link/5f85c9321e085307a0892f7e


Vue3源码解释，提供了详细的测试用例和流程图。

如下图：

图解 Vue、Vue-Router、Vuex 源码

Github : https://github.com/biaochenxuying/blog

在线文档：
https://github.com/biaochenxuying/vue-family-mindmap


提供了多张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构。

如下图：

来自作者：biaochenxuying


Vue.js 技术揭秘

Github : https://github.com/ustbhuangyi/vue-аnalysis

在线文档：
https://ustbhuangyi.github.io/vue-аnalysis/


该电子书的目标是全方位细致深度解析 Vue.js 的实现原理，分析的版本为 Vue.js 2.5.17-beta.0。

如下图：

Vue源码逐行注释分析

Github :
https://github.com/qq281113270/vue


Vue 源码逐行注释分析，提供了40MB+ 的 Vue 源码程序流程图思维导图。

如下图：

React 技术揭秘

在线阅读：
https://react.iamkasong.com/


《React技术揭秘》电子书的宗旨是打造一本严谨、易懂的 React 源码分析教程。内容不预设观点，所有观点来自React核心团队成员在公开场合的分享，其通过了丰富的参考资料，包括在线Demo、文章、视频。

如下图：

React的秘密

作者网址：https://segmentfault.com/u/neronero

在线阅读：
https://segmentfault.com/blog/react-secret?_ea=103006355


本项目是作者在阅读React源码过程中搭建的调试环境，学习过程中对源码添加了较为详细的注释，并记录了一些自己的理解与思考，输出了十几篇文章。要感谢作者：nero

如下图：

图解React源码

Github : https://github.com/7kms/react-illustration-series

在线阅读：
https://7kms.github.io/react-illustration-series/


图解React源码，用大量配图的方式, 致力于将 React 原理表述清楚。

如下图：

React源码分析

Github :https://github.com/BUPTlhuanyu

在线阅读：
https://buptlhuanyu.github.io/ReactNote/


对 React 相关代码库以及框架的源码进行了一定的分析，并总结了一张详细的流程图。

如下图：

React源码系列

Github :
https://github.com/lizuncong/mini-react

在线阅读：
https://buptlhuanyu.github.io/ReactNote/


手写React、react-dom、react reconciler主流程源码，加深对react源码的理解。包括fiber，合成事件，hooks实现原理，dom diff，reconciliation，scheduler等。

如下图：