前端源码研读 #

React、Vue 源码阅读。

目标 #

• 核心学习视图框架的原理，如 React、Vue、Solid。关注前端框架发展趋势。
• 学习 SSR 和 Meta Framework 原理，降低知识重心。
• 从 Web 向 Node 发展，逐渐摆脱狭义前框的范围束缚。

思路 #

• 夯实基础，从框架的思维思考原理。
• 有的放矢，按照阅读计划逐渐深入。
• 由浅而深、由总而分，通过笔记沉淀知识。
• 知识的提纯和总结，温故而知新。
• 知识交叉和扩展。

方法 #

• 阅读视图、响应式框架源码并进行总结。
• 阅读常见库源码，分 Web 模块和 NodeJS 模块。
• 通过话题扩展丰富内容。
• 翻译汉化国外优质博文，开阔视野。更新于知乎，便于查阅与引用。
• 优化与完善笔记文档。

开始 #

关于此部分的重要性不言而喻，因此新的 repo 将专门为此建立。请参阅如下内容继续深入。

• Fancy Front End
• jonsam-ng/fancy-front-end: Front-end source code reading, talk 💬 to excellent code. 前端源码精读，精读 react、vue3 源码。🧑‍💻👩‍💻👨‍💻

继续 #

本话题将秉持总结和扩展之目标，并对 Fancy Front End 的内容进行归纳总结和扩展。

更多 #

从源代码中学习（初学者的有效成长方式） #

为什么我们需要阅读源码 #

作为程序员，我们每天都在和源代码打交道。经过多年的学习，大多数程序员都能 "编写" 代码，或者至少能复制和修改代码。尽管如此，我们教授编程的方式还是强调了写代码的艺术，而不是如何阅读代码。当我说 "阅读代码" 时，我指的是故意阅读源代码的做法。

正如我们所知，编程和写作有很多共同之处。唐纳德 - 克努斯（Donald Knuth）甚至提出了 "识字编程" （literate programming）的编程范式。编码和写作都有相同的共同理想，就是表达我们的想法。

还记得你在学校是如何学习写作的吗？我们的写作能力来自于阅读过大量的文字，从小学开始，一直到现在。多年来，我们再阅读不同难度的伟大作家的作品，并练习各种写作技巧。

"如果你没有时间阅读，你就没有时间（或工具）来写作。就这么简单" —— 斯蒂芬 - 金在他的回忆录《论写作》中说。

正如斯蒂芬 - 金所观察到的，作家必须广泛而频繁地阅读以提升自我，并学习如何撰写句子和故事结构能使读者阅读自己的作用。

与阅读书籍一样，有目的地阅读代码将帮助程序员更快地成长，特别是对于中级程序员。

有意地阅读代码有三个好处。

站在巨人的肩膀上 #

我们可以向别人学习。伟大的源代码就像文学名著。它提供了启迪，而不仅仅是信息和知识。

通过浏览 Linux 内核、Redis、Nginx、Rails 或任何其他著名项目的源代码，你可以汲取世界各地成千上万顶级程序员的智慧。

在这些项目中可以找到无数好的编程、范式选择、设计和架构的例子。向别人学习的一个额外好处是能够避免常见的陷阱。大多数错误已经被别人犯过了。

解决困难问题 #

在你的编程生涯中，你最终会遇到一些通过谷歌搜索无法解决的问题。如果你没有遇到过这种问题，那只能说明你编程的时间还不够长：)。阅读源代码是研究这种问题的好方法，也是学习新东西的非常好的机会。

扩宽你的知识领域 #

大多数程序员只在少数特定领域编码。一般来说，如果你不不断地鞭策自己，你的编程技能将是你同事的平均水平。不要满足于修复一些 bug 或者给现有系统增加一些琐碎的功能的工作。相反，要尝试扩展到一个新的领域，总是试图找到一个你在日常工作中没有接触过的、但你感兴趣的新领域。这将拓宽你对整个编码的理解。

阅读什么样的源代码 #

好的，所以阅读源代码是有好处的。接下来的问题是，有这么多优秀的作品可以选择，我们应该读什么样的源代码呢？

你必须从选择一个目标开始。如果没有这个重点，你对源代码的理解就会大打折扣。

这里有几个典型的场景。

• 当你想学习一门新的编程语言时。学习一门新的编程语言并不只是意味着学习语法。然而，在接受一种新的语言时，阅读源代码是一种非常有效的学习方法。我从 rust-rosetta 项目中学到了很多关于 Rust 的知识。Rosetta Code 是一个收集各种编程语言中常见任务的解决方案的项目。它是学习一门新的编程语言的有用资源。

• 当你想了解一个特定的算法或实现时。例如，我们都曾使用过标准库中的排序函数。你有没有想过它是如何实现的？或者说你需要使用 Redis 中的 Set 数据结构，它的实现中使用了哪些数据结构？为了这个目的，你只需要翻阅项目中与实现有关的部分，通常是一些文件或函数。

• 当你在一个特定的框架中编码时。因为这意味着你对相关的框架有一定的经验，所以现在是阅读框架本身的部分源代码的好时机。显然，了解它的源代码会增进你的理解。

• 当你想进入一个新的领域时，阅读这个领域的经典和著名项目。例如，既然你在做 Web 开发，那么分布式系统是否让你感兴趣？如果是的话，如果你知道 Golang，也许 etcd 是你的好选择。你想深入研究操作系统的内部结构吗？那么也许 xv6 会是一个好的开始。我们正处在一个伟大的时代，Github 上有许多伟大的开源项目。试着找几个吧。

记住，根据你目前的编程技能和知识水平来选择项目。如果你选择的项目超出你目前的技能水平太多，你最终会感到垂头丧气。阅读一些较小的项目，然后再转向较大的项目。如果你在某段时间内无法理解某些特定的代码，这意味着你有一个知识差距。把代码收起来，试着阅读一些书籍、论文或其他相关文件，然后在你更有信心时再回来。

我们总是以一种模式取得进步：阅读（代码、书籍、论文）、写作、阅读更多、写作更多。

如何阅读源代码 #

作为一个初学者，我们如何阅读代码也是一个需要投入时间和精力的过程。阅读代码并不容易。仅仅阅读源代码是不够的，你要努力理解他人的设计和思想。

先决条件 #

为了有效地阅读代码，你需要准备好一些东西。

• 一个你能有效使用的编辑器。你需要有快速搜索关键词或变量的能力。有时你需要找到引用或函数的定义。熟悉你的编辑器。为了变得更有效，学会只用键盘来使用它。这将使你在没有干扰的情况下专注于代码。
• 掌握 Git 或类似的版本控制工具的基本技能，这样你可以比较不同版本之间的差异。
• 与源代码有关的文件。这些将作为你阅读的参考，特别是设计文件，代码惯例，等等。
• 对所使用的编程语言和设计模式的一些知识和经验。这对大型项目来说是必须的。如果你对一种编程语言非常了解，你就会知道源代码是如何组织的，有哪些范例和最佳实践。当然，这需要时间来积累。要有耐心。

过程和提示 #

阅读过程不是线性的。你不能只是一个一个地阅读源文件。相反，大多数时候我们都是从上到下阅读代码。下面是一些更有效地阅读代码的技巧。

1. 结合上下文阅读代码：当你开始阅读代码时，总是试着抛出问题。例如，如果一个应用程序有一个缓存策略，一个好的问题是，如果一个键失效了，缓存中的值是如何更新的？有了这样的问题，你就会在上下文中阅读代码，或者说有了一个目标，这使得阅读过程变得很愉快。你甚至可以给自己做一些假设。然后，通过代码，我们需要确认我们的假设。这变得有点像间谍活动：你想发现代码的真相，代码的逻辑，它是如何像故事一样讲述的。

2. 运行并与代码互动：源代码就像一个乐高玩具，只是已经组装好了。如果你想了解它是如何组装起来的，你需要与它互动，甚至有时候把它拆开。对于代码，阅读同一源代码的旧版本是很有帮助的。阅读 Git 上的差异，并试着弄清楚某个特定功能是如何实现的（Changelogs 在这方面很有用）。例如，我发现 Lua 的第一个版本要简单得多，这有助于我理解其作者最初的设计思想。 调试是阅读代码的另一种方式。试着在代码中加入一些断点（或打印点），并了解任何打印到控制台的输出。如果你对代码有足够的了解，试着做一些修改，然后重建并运行它。最简单的技术是尝试调整配置，以便看到不同配置的结果。之后，你可以尝试添加一些微不足道的功能。如果结果对其他人有用，你可以向上游贡献。

3. 数据结构之间的关系：数据结构是一个程序中最重要的元素。用笔或任何你喜欢的工具画出数据结构之间的关系。其结果是一张源代码的地图。在阅读过程中，你将需要经常参考这张地图。一些工具如 scitools 可以用来生成 UML 类图。

4. 模块的依赖性和边界：大的项目包含多个模块，典型的一个模块有单一的责任。这有助于我们减少代码的复杂性，在适当的水平上进行抽象。一个模块的接口是抽象的边界，我们可以阅读一个模块，然后转到另一个模块。如果你正在阅读一个用 Make 构建的 C/C++ 项目，Makefile 将是了解模块组织方式的一个很好的入口。 边界本身也很有用。伟大的代码组织得很好，它的变量和函数的命名方式是为了便于阅读。你不需要阅读所有的源文件，你可以忽略那些不重要的或熟悉的部分。如果你已经确认一个模块只是为了解析而设计的，你大概已经知道它的功能；那么你可以跳过阅读这个模块。当然，这将大大节省时间。

5. 使用测试案例：测试用例也是对理解代码的一个非常好的补充。测试用例是文档。如果你阅读一个 Class，试着阅读相关的测试代码。这可以让你弄清楚一个 Class 的接口，以及它的典型用法是什么。一个综合的测试用例对于用一些特定的输入来调试代码也是很有用的，它可以让你遵循程序的整体流程。

6. 回顾：在花了很长时间阅读一个项目后，为什么不写一份代码的评论呢？这就像回顾一本书一样。你可以写下这个源代码的好或坏的部分，以及你从阅读中所学到的东西。写这种文章可以澄清你的理解，也可以帮助别人阅读源代码。