本文介绍了“程序员如何阅读源代码”的知识。很多人在实际案例的操作中会遇到这样的困难。让边肖带领你学习如何处理这些情况。希望大家认真阅读，学点东西！
React:
React架构的演进——从同步到异步。
反应体系结构的演变——从递归到循环。
React架构的进化更新机制。
反应体系结构的进化——钩子的实现。
Vue:
Vue模板的编译原理。
Ve3模板的编译优化。
Vue3传送组件的实践与原理。
快速调试源码
说到阅读源代码，很多人都有一个误解。他们认为在阅读源代码时，必须在github上克隆完整的代码，只有下载完整的代码，才能开始愉快地学习。
调试 React
这里，我们以React为例。克隆完源克隆后，整个人完全不知所措。
gitclonegit @ github.com : Facebook/react . git
React源目录的解构
这个时候，我通常会开始在网上搜索文章，以及如何调试React源代码。但是这么大规模的项目建设过程是比较复杂的，所以如果只是单纯的想知道源代码，就不需要知道这些复杂的东西。在这里，我教你一个简单的方案。直接从CDN下载官方编译的开发源代码(https://cdn.jsdelivr.net/NPM/react @ 17 . 0 . 1/UMD/react . development . js)，中间的版本号可以替换成你想看的任何版本。
反应
在我们有了源代码之后，我们将开始编写Demo。这时候自己构建一个项目会比较麻烦，因为写React的时候会有jsx，所以babel需要逃离jsx。这里建议使用官方的脚手架：create-react-app。
xcreate-react-appre act-democd react-demo在这里，我们需要稍微修改一下webpack的配置，通过react-app-rewired修改配置。
npminstallreact-app-rewired-save-dev
修改package.json
然后，在文件夹中创建一个新的config-overrides.js文件，并配置webpack的externals属性，这样项目中的react和react-dom就可以遍历安装在窗口下的对象。
/* config-overrides . js */module . exports=function override(config，env){//dostufwitheweebpackconfig.config.externals={'react': '窗口。React '，' react-dom': '窗口。ReactDOM '，}；returnconfig}下一步是在窗口安装react，并将我们之前下载的develo放到CDN上。
pe 版的源码放到 public 目录，然后在 public/index.html 中引入源码。
全局引入 react
然后通过 npm run start 正常启动项目就好了。
React App
接下来就能愉快的搞事情，可以在 Chrome 的 Sources 面板里面开始 debug 之旅了，当然如果你更喜欢 console.log ，也可以在 public/react.js 里打上心爱的 log 。
Sources
调试 Vue
调试 Vue 比 React 更加简单，因为 Vue 支持浏览器进行模板编译。我们同样在 CDN 直接下载已经编译好的完整开发版(https://www.jsdelivr.com/package/npm/vue?version=3.0.4&path=dist)。
image-20201205232605725
然后，新建一个 vue.html ，把文件丢到本地的 http 服务里面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3 Demo</title> </head> <body> <div id="app"></div> <script src="/script/vue3.js"></script> <script> const app = Vue.createApp({ data() { return { name: 'shenfq' } }, template: `<div> Vue App </div> ` }) app.mount('#app') </script> </body> </html>
我们现在已经可以直接开始调试 Vue3 的源码了，就是这么简单粗暴。当然，如果想通过 .vue 的方式写模板，还是得参照上面 React 提到的那种方式。
找准切入点
有了调试源码的方法，我们还需要找准一个切入点，不能为了看源码而看源码。所谓的切入点就是一个个小问题，比如我想要弄懂 Vue 的模板是如何转变成虚拟 DOM 的，我们可以先在官方文档查找资料，看有没有相关说明，幸运的是，Vue 官方文档在渲染函数-模板编译部分刚好这个问题有相关说明。
Vue官方文档
文档中提到了 Vue.compile ，然后我们就可以在源码中搜索这个 Api 开始进行调试。这就是带着目的去看源码，我们只有带着问题出发的时候，才会具有更高的效率。
除了带着问题出发，还可以参考其他优秀的文章，集千万网友的智慧于一体。当然这也是个双刃剑，因为你可能会搜到一些辣鸡文章，反而降低你的效率。而且，框架在迭代的过程中，变化会很多，可能你学习的是 React 16 的源码，搜到的 React 15 相关的文章，然后你会花很多时间和精力想去弄清楚为什么你看到的和别人写的为什么不一样，到底是你的打开方式不对，还是作者有笔误。
同时，还有一些文章喜欢画一些吸引眼球的架构图(我本人)，看完你会直呼内行，但是这些架构图大多是站在作者个人的角度上的画的，很可能和你之前的角度不一样，又需要花一些时间来理解他的思路。如果，我们把庞大的项目拆分成一个个小小的问题之后，逐个击破，这时候再从全局的角度来思考整个框架的设计思路以及运行逻辑，就能事半功倍。
强制输出
有输出的学习才是学习，在阅读源码的过程中，一定得边看边思考，思考的过程中，还需要形成文字记录，如果只是一直盯着代码看，很难理解。
我在看源码的过程中，会一直思考，怎么样才能将这部分讲给别人听，是不是能写个 Demo 之类的，让大家跟着我的思路来学习。这样即让自己学懂了，又可以将学习的过程分享出来帮助到其他人，何乐而不为。
“程序员是怎么阅读源码的”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/42852.html