Source code reading

目前网上有很多「XX源码分析」这样的文章，不过这些文章分析源码的范围有限，有时候讲的内容不是读者最关心的。同时我也注意到，源码是在不断更新的，文章里写的源码往往已经过时了。因为这些问题，很多同学都喜欢自己看源码，自己动手，丰衣足食。 这篇文章主要讲的是阅读大型的前端开源项目比如 React、Vue、Webpack、Babel 的源码时的一些技巧。目的是让大家在遇到需要阅读源码才能解决的问题时，可以更快的定位到自己想看的代码。授人以鱼不如授人以渔，希望大家可以通过这篇博客，了解到阅读大型前端项目源码时的切入点。在之后遇到好奇的问题时，可以自己去探索。 问题驱动——不要为了看源码而看源码 首先我们要明确一点，看源码的目的是什么？ 我个人的意见是，看源码是为了解决问题。开源项目的源代码并没有什么非常特殊的地方，也都是普通的代码。这些代码的数量级一般都挺大，如果想是从源码中学到东西，直接浏览整个 Codebase 无疑是大海捞针。 但如果是带着问题去看源码，比如想了解一下 React 的合成事件系统的原理，想了解 React 的 setState 前后发生了什么，或者想了解 Webpack 插件系统的原理。也有可能是遇到了一个 bug，怀疑是框架/工具的问题。在这样的情况下，带着一个具体的目标去看源码，就会有的放矢。 看最新版的源码 之前看到一种说法，看源码要从项目的第一个 commit 开始看。如果是为了解决前文中对框架/工具产生的困惑，那自然要看当前项目中用到的框架/工具的版本。 如果是为了学习源码，我也建议看最新的源码。因为一个项目是在不断迭代和重构的。不同版本之间可能是一次完全的重写。比如 Vue 2.x 和 React 16。重构导致了代码架构上的一些变化，Vue 2.x 引入了 Vritual DOM，Pull + Push 的数据变化检测方式让整个代码的结构变的更清晰了，所以 2.x 的代码其实比 1.x 的更容易阅读。React 16 重写了 Reconciler，引入了 fiber 这个概念，整个代码仓库结构也更清晰，所以更推荐阅读。 前置条件 看源码怎么看，当然不能一把梭了。 看源码之前需要对项目的原理有一个基本的了解。所谓原理就是，这个项目有哪些组成部分，为了达到最终的产出，要经过哪几步流程。这些流程里，业界主流的方案有哪几种。 比如前端 View 层框架，要渲染出 UI，组件要经过 mount、 render 等等步骤。数据驱动的前端框架，在 mounted 之后，就会进入一个循环，当用户交互触发组件数据变化时，会更新 UI。其中数据的检测方式又有分 Push 和 Pull 两种方案。渲染 UI 可以是全量的字符串模板替换，也可以是基于 Virtual DOM 的差量 DOM 更新。 又比如前端的一些工具，Webpack 和 Babel 这些工具都是基于插件的。基本的工作流程就是读取文件，解析代码成 AST，调用插件去转换 AST，最后生成代码。要了解 Webpack 的原理，就要知道 Webpack 基于一个叫 tapable 的模块系统。...

本文的写作有一部分没有完成，打算针对React 16.3再对本文进行修改，请大家留意 React 16在近期发布了。除了将备受争议的BSD+Patents协议改为MIT协议之外，React 16还带来了许多新特性，比如： 允许在render函数中返回节点数组和字符串。 render() { // 再也不用在外面套一个父节点了 return [ // 别忘了加上key <li key="A">First item</li>, <li key="B">Second item</li>, <li key="C">Third item</li>, ]; } 提供更好的错误处理。 支持自定义DOM属性。 但最关键的一点还是： 没错，React 16是一次重写，在保持API不变的情况下，将核心架构改为了代号为Fiber的异步渲染架构。新架构带来了的变化有： 体积减小 服务端渲染速度大幅提升 更responsive的界面 一次预谋已久的重写 Fiber这个架构并不是突然冒出来的。Facebook的工程师在设计React之初就设想未来的UI渲染会是异步的。从setState()的设计和React内部的事务机制可以看出这点。 在去年，React的开发者Andrew Clark在社区中放出了Fiber架构的一个文档。描述了Fiber架构的基本信息。同时表示Facebook的工程师正在实现这个新架构。今年3月的React Conf 2017上，Lin Clark做了A Cartoon Intro to Fiber这个分享，介绍了Fiber架构的工作原理。今年9月，Fiber架构随着React 16正式发布。Fiber架构的代码放在原来的React仓库之中，并且可以通过运行时的判断来切换新老架构，方便测试和部署。因此Fiber的开发是一个渐进的过程。这个网站实时展示了Fiber通过的测试用例，随着所有用例的通过，Fiber也正式发布了。有趣的是，在React 16发布之前，Fiber架构的React就已经运行在Facebook的产品中了。FB的工程师表示看到新架构在线上产品运行起来，是很激动人心的。具体的情况可以看这篇博客：React 16: A look inside an API-compatible rewrite of our frontend UI library。 Fiber概念简介 本文的题目是React 16 Fiber源码速览，所以关注的主要是Fiber相关的代码。在分析源码之前，首先介绍一些基本概念。 推荐看上文中提到的A Cartoon Intro to Fiber。这个分享比较系统和形象解释了Fiber架构的工程流程，并且使用了React源码中的术语。有助于理解Fiber的概念和源码。下文中的配图也来自这个分享。 reconciler VS renderer Reconciler就是我们所说的Virtul DOM，用于计算新老View的差异。React 16之前的reconciler叫Stack reconciler。Fiber是React的新reconciler。Renderer则是和平台相关的代码，负责将View的变化渲染到不同的平台上，DOM、Canvas、Native、VR、WebGL等等平台都有自己的renderer。我们可以看出reconciler是React的核心代码，是各个平台共用的。因此这次React的reconciler更新到Fiber架构是一次重量级的核心架构的更换。...