找准切入点,调试看源码,事半功倍

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习

最近写了很多源码分析相关的文章,React、Vue 都有,想把我阅读源码的一些心得分享给大家。

React:

  • React 架构的演变 - 从同步到异步

  • React 架构的演变 - 从递归到循环

  • React 架构的演变 - 更新机制

  • React 架构的演变 - Hooks 的实现

Vue:

  • Vue 模板编译原理

  • Vue3 模板编译优化

  • Vue3 Teleport 组件的实践及原理

快速调试源码

说到看源码,很多人都有个误区,觉得看源码必须要到 github 上把完整的代码 clone 下来,认为只有把完整的代码下载下来,才能开始愉快的学习。

调试 React

这里我们先拿 React 举例,把源码 clone 下之后,整个人都懵逼了。

git clone git@github.com:facebook/react.git
React 源码目录解构

一般这时候会开始在网上搜文章,如何调试 React 源码。但是这种大型项目的构建流程较为复杂,如果只是想简单了解源码,不需要去了解这些复杂的东西。这里教大家一个简单的方案,直接到 CDN 上下载官方编译好了的开发版源码(https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.development.js),中间的版本号可以替换成任何想看的版本。

react

有了源码之后,我们要开始写 Demo,这时候如果自己搭一个项目就比较麻烦了,因为写 React 就会有 jsx,就需要 babel 进行 jsx 转义,这里推荐使用官方脚手架:create-react-app

npx create-react-app react-demo
cd react-demo

这里我们需要稍微修改下 webpack 的配置,通过 react-app-rewired 修改配置。

npm install react-app-rewired --save-dev
修改package.json

然后,在文件夹内新建 config-overrides.js 文件,配置 webpack 的 externals 属性,让项目内的 react、react-dom 都能够走 window 下挂载的对象。

/* config-overrides.js */module.exports = function override(config, env) {// do stuff with the webpack config...config.externals = {'react': 'window.React','react-dom': 'window.ReactDOM',};return config;
}

接下就是将 react 挂载到 window 上,把我们之前在 CDN 上下载的 develope 版的源码放到 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 之类的,让大家跟着我的思路来学习。这样即让自己学懂了,又可以将学习的过程分享出来帮助到其他人,何乐而不为。


推荐阅读

知乎问答:一年内的前端看不懂前端框架源码怎么办?
我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注若川视野,回复"pdf" 领取优质前端书籍pdf,回复"加群",可加群长期交流学习

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读,也可以星标我的公众号,便于查找

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android布局大全

Android的界面是有布局和组件协同完成的&#xff0c;布局好比是建筑里的框架&#xff0c;而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列&#xff0c;就组成了用户所看见的界面。 所有的布局方式都可以归类为ViewGroup的5个类别&#xff0c;即ViewGroup的5个直接子类…

java实现加减乘除运算符随机生成十道题并判断对错_2020年Java面试题(3年的工作总结),最全的知识点总结...

这份Java面试题整整花了三个月的时间来整理&#xff0c;都是自己再工作中总结出来&#xff0c;记住多少就写多少&#xff0c;希望这份资料可以帮助你们&#xff0c;文末有其余部分资料的领取方式.Redis12道面试题1.什么是Redis&#xff1f;答&#xff1a;Remote Dictionary Ser…

.NET 中的泛型 101

1.1.1 摘要 图1 C# 泛型介绍 在接触泛型之前&#xff0c;我们编程一般都是使用具体类型&#xff08;char, int, string等&#xff09;或自定义类型来定义我们变量&#xff0c;如果我们有一个功能很强的接口&#xff0c;而且我们想把它提取或重构成一个通用的接口&#xff0c;使…

年底了,给想进阶的的前端朋友一些福利

2020 年&#xff0c;很多朋友都经历了一段比较艰难的求职季。年末&#xff0c;“就业寒冬”迎来了一丝暖阳&#xff0c;很多中大型互联网公司扩大了未来一年的招聘需求。前不久&#xff0c;字节跳动放出了年末要招 1 万人的消息&#xff0c;腾讯校招规模也将扩张至 5000 人&…

Vue Router 4.0 正式发布!焕然一新。

关注若川视野&#xff0c;回复"pdf" 领取资料&#xff0c;回复"加群"&#xff0c;可加群长期交流学习12月8日&#xff0c;Vue Router 4 正式发布稳定版本。在经历了 14 个 Alpha&#xff0c;13 个 Beta 和 6 个 RC 版本之后&#xff0c;Vue Router v4 闪亮…

实战Nginx与PHP(FastCGI)的安装、配置与优化

转载链接&#xff1a;http://ixdba.blog.51cto.com/2895551/806622 一、什么是 FastCGI FastCGI是一个可伸缩地、高速地在HTTP server和动态脚本语言间通信的接口。多数流行的HTTP server都支持FastCGI&#xff0c;包括Apache、Nginx和lighttpd等&#xff0c;同时&#xff0c;…

10个前端8个用Vue的,怎么才能在面试中出彩?

大家好&#xff0c;我是若川。现在但凡出去面试&#xff0c;面试官几乎必问 Vue3.0 。不仅会问一些核心特性&#xff0c;还会问原理层面的问题。比如&#xff1a;▶框架层面问题&#xff1a;Vue3.0 新特性 Composition API 与 React.js 中 Hooks 的异同点&#xff1f;▶源码、原…

故乡 | 登高望远,夜幕降临

欢迎星标我的公众号若川视野&#xff0c;回复加群&#xff0c;长期交流学习上周末看了几集豆瓣评分8.5分刘同同名小说的青春剧《我在未来等你》&#xff0c;让我回想起自己的高中生活。也想起小时候经常爬到故乡附近的小山&#xff0c;看夕阳西下。时常和同事开玩笑说&#xff…

CentOS5安装Nginx1.4+PHP5.5 FastCGI

转载链接&#xff1a;http://blog.csdn.net/staricqxyz/article/details/17012329 yum -y install gcc gcc-c autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2…

一份热乎乎的滴滴前端面经

关注若川视野&#xff0c;回复"pdf" 领取资料&#xff0c;回复"加群"&#xff0c;可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司&#xff0c; 国庆节前两三天投的简历&#xff0c; 国庆后复工第一天就给我打了电话约一面。那时候…

用webBrowser取源文件取不到的点击数--选秀榜selectop.com网站内容管理系统之六

用idhttp可以取到源文件&#xff0c;但网站用脚本代码&#xff0c;源文件是看不到&#xff0c;并且代码的结果也取不出。webBrowser可以多次返回下载到的内容&#xff0c;不包括任何html语法&#xff0c;这个当中就有文章的点击数。在WebBrowser1DownloadComplete事件中处理&am…

真诚推荐几个最值得关注的前端公众号

前端技术日新月异&#xff0c;发展迅速&#xff0c;作为一个与时俱进的前端工程师&#xff0c;需要不断的学习。这里强烈推荐几个前端开发工程师必备的优质公众号&#xff0c;希望对你有所帮助。大家可以像我一样&#xff0c;利用碎片时间阅读这些公众号的文章。code秘密花园一…

Silverlight Unit Test Framework

微软在08年的时候推出了一个Silverlight的单元测试框架&#xff0c;该框架在Mix 08的时候与Silverlight controls同时推出的&#xff0c;微软工程师Jeff Wilcox一直参与维护该单元测试框架。Scott Gu对这个框架的介绍Jeff Wilcox提供的视频介绍该框架的源代码已经包括在Silverl…

Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

转载链接&#xff1a;http://freeloda.blog.51cto.com/2033581/1288553 大纲 一、前言 二、环境准备 三、安装与配置Nginx 四、Nginx之反向代理 五、Nginx之负载均衡 六、Nginx之页面缓存 七、Nginx之URL重写 八、Nginx之读写分离 注&#xff0c;操作系统为 CentOS 6.4 x86_64…

能在任意一种框架中复用的组件,太牛了!

Web Component 是一种 W3C标准支持的组件化方案&#xff0c;通过它可以编写可复用的组件&#xff0c;同时也可以对自己的组件做更精细化的控制。更牛的是&#xff0c;Web Component 可以在任何一种框架中使用&#xff0c;不用加载任何模块、代码量小&#xff0c;优势非常明显&a…

stm32cubemx中文_用 STM32 通用定时器做微秒延时函数(STM32CubeMX版本)

概述​ 在使用 DHT11 的时候&#xff0c;时序通信需要微秒来操作&#xff0c;STM32CubeMX 自带一个系统时钟&#xff0c;但是实现的是毫秒级别的。因此就自己用通用计时器实现一个。文章目录环境&#xff1a;开发板&#xff1a;STM32F4探索者&#xff08;正点原子&#xff09;1…

人脸识别拷勤门禁主板_捷易讲解AI无感人脸识别考勤门禁终端设备在使用中的维护方法...

人脸识别考勤门禁终端设备虽然在出厂时&#xff0c;都有做密封处理&#xff0c;但面对细小的灰尘&#xff0c;并没有做到百分百防尘。灰尘对于AI无感人脸识别考勤门禁终端设备是有一定的影响的&#xff0c;他会沉淀在主板上、屏幕上&#xff0c;影响设备散热和正常工作&#xf…

【翻译】How-To: Using the N* Stack, part 3

原文地址&#xff1a;http://jasondentler.com/blog/2009/08/how-to-using-the-n-stack-part-3/ Java – 一种代码松散的XML 在我们学习 Fluent NHibernate 之前, 应该先了解下老式的 NHibernate 映射文件应该是怎样写的。 在一个典型的 NHibernate 配置中&#xff0c;你会有很…

你可能需要的网易前端三轮面经

关注若川视野, 回复"pdf" 领取资料&#xff0c;回复"加群"&#xff0c;可加群长期交流前言最近一个星期面了几家公司&#xff0c;最后收获了心仪的网易有道offer&#xff0c;于是推掉了其他的面试&#xff0c;至于一些其他大厂&#xff0c;并没有投简历&am…

复习.net/c#时的小文章之万年草稿版 (全是基础概念,请懂的人绕行)

必读文&#xff1a;61条面向对象设计的经验原则&#xff08;体会篇&#xff09; C#知识点集合 (面试必备)一、显式(explicit)转换和隐式(implicit)转换的一般概念int i 100; Response.Write(i); // 这就是隐式 Response.Write(i.ToString()); // 这就是显式 一般来讲&#xff…