看到一篇好文章，为什么好？可以分几个方面去分析

  1. 文章思路与大纲设计
  2. 行文风格
  3. 内容有什么亮点

今天看到苏畅写的一篇文章《如何学习 React 源码》，感觉文章思路很清晰，最后文章还推荐了作者自己写的一本开源的电子书籍《React 技术揭秘》，让我很钦佩。

文章分析

  1. 首先，清晰的表达文章的目的，解决什么问题，阅读者能从中学到什么。这可能是一般书籍的前言部分。
  2. 介绍学习源码的路径，入口 -> 调用栈 -> 源码模块
  3. 提出结论：自顶向下的学习步骤是自然的
  4. 推荐作者自己的开源书籍

先从顶层去思考，一个东西可以很简单，容易让大家入门。

原文摘录

备注：记录文章中自己印象比较深刻的点，尽量还原不做内容上修改，格式上可能会有差别。

对于想学习 React 源码的同学来说，这同时是机遇也是挑战。

挑战是：React 内部运行流程很复杂。

机遇是：学懂了以后，即时除去前端领域的知识外，你的收获将不限于：

  • 编程范式：函数式编程的代数效应思想。
  • 操作系统：如何从零实现协程（可以理解为generator）
  • 数据结构：链表，树，小项堆
  • 算法：O(n) 的 Diff 算法，各种位运算
  • 浏览器运行机制

前端同学想扩展自己的知识边界，从学习 React 源码下手是个不错的选择。

我们调试一个库的源码，一般从他的入口函数开始 debug。对于 React 来说，这个入口就是 ReactDOM.render。

打印从 ReactDOM.render 执行到视图渲染过程的调用栈会发现：这中间的调用流程非常复杂，甚至还有异步流程。

如果将调用栈按功能划分，可以分为三块：

  1. 产生更新
  2. 决定要更新什么组件
  3. 将更新的组件渲染到页面上

分别对应了源码架构中的三大模块：调度 - 协调 - 渲染

从理念到架构，从架构到实现，这是符合大脑认知的自顶向下的学习步骤。

自我思考

这么多年过去了，才发现一些基础技能的重要性，就拿写文章来说，小学的时候老师就教了许多分析文章，阅读理解的方法，那时候没有很深的体会，只是为了考试去学习，培养的更偏向于上层的技能，而不是底层的基础的元能力。其实，这与老师的思维方式有关，他们关注的是升学率，结果为向导，怎么最快的出成绩才是重要的，但从长远来说考试成绩只是人生的一小部分。

记得小时候，经常看到村里面墙上的标语“十年树木，百年树人”，并不是没人看到这个问题，可最重要的是执行，全民的素质提升了才是能达到更好的结果。就国家来说，第一步不追求质量，简单粗暴把义务教育时长提升，把量做起来，也有可能出人才。再到最近的一带一路，总体思路上是对的，可能执行上会有一些细微偏差。

必须去寻找亮点，同样的事情切入点不一样，可能就是亮点。这篇文章就是不同与其他的以 API 接口入手，自上而下的学习 React，从最上层 React 解决的问题以及设计原则入手，再到具体源码，再从具体源码扩展到编程的基础知识。

我又想起了一句话“举一反三”，结合刻意练习，后续在在思考某一个问题时是否可以定一个简单粗暴的规则：至少从三个不同的切入点去思考同一个问题。

今天的文章提醒我了，可以通过学习 React 源码这个目标驱动我去扩展编程的基础知识，就像大脑神经元一样，用一个最熟悉的节点去联想新的知识。