程序员是如何阅读源码的
最近写了很多源码分析相关的文章，React、Vue 都有，想把我阅读源码的一些心得分享给大家。
创新互联公司长期为上千多家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为泗洪企业提供专业的成都做网站、网站设计，泗洪网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
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 服务里面。
Vue3 Demo