如何学习一个框架

昨天我在一个群里有一个人在问,谁会 rxjs?我当时其实还有点好奇,对于 rxjs 我一直觉得很难,前阵子我也一直在研究。

Rxjs 我也一直觉得挺有用的,但是身边用 rxjs 的朋友真的很少,我司的项目也是根本没有。

所以我听到有人问 rxjs 的问题,我就特别激动,就问了他什么问题,他说刚接触 rxjs,然后看源码遇到一端代码看不懂。

我当时心想,还有这种操作的么,还没学会怎么使用就开始看源代码了,然后他就把他不懂的代码贴了上来,rxjs 源码是 TS 写的,我对 TS 不算太熟悉,但是他贴的代码我还是能看懂,他就问了个 this 的问题,我看着也很简单,但是我没有解答他的问题。

原因有两点:

  1. 态度不好,我不喜欢。我跟他说你如何去学习 rxjs 的源码,然后给他介绍书(程墨的《深入浅出 RXJS》)。他直接回复我,你会不会,我就想知道这个问题,不知道就别 BB(大概就是这意思),所以我直接回了他,不会。
  2. 自以为是。他问的问题其实很简单,虽然 Rxjs 源码是 TS 写的,我对 TS 也不是很熟悉,但是这点代码我觉得还是比较简单的,然而这没看懂,然后还在没有上手怎么使用,就开始搞源码,还不听人建议,这纯属自以为是,觉得看源码才是王道。对于这种纯属基础没打好,就开始搞高端的,走都没学会就想学跑。

那么我们如何正确的学习一个框架,什么时候该看源码,学到什么程度再看源码呢?

我觉得学习一个框架应该分为三个程度。

  1. 学会使用
  2. 熟悉框架的设计思想、关键部分的实现思路以及整个框架的知识体系
  3. 源码解读以及造轮子

我以学习 React 为例来介绍如何学习一门框架(库)

学会使用

这个程度我相信是大部分人所处的阶段,熟练使用 React 的 API,熟悉 JSX,各个声明周期的使用,以及组件之间(父子、子父、兄弟等)如何传递消息,高阶组件等。

这就相当于入了门,可以完成一般的业务了。

熟悉框架的设计思想、关键部分的实现思路以及整个框架的知识体系

设计思想
众所周知,React 是一种组件化的解决 UI 构建的一种方案,横向比较同类型的 Vue ,也是组件化的一种解决方案(这体现了 react 抽象的设计思想),既然是组件化的思想,那么这种解决方案,理论上都会有组件的生命周期,来处理组件从创建到销毁的钩子函数。

React 也是一种声明式的解决方案,通过数据驱动来改变 UI,从而有 UI = f(state)。

当然 react 还有其他的设计思想,比如组合(各个小组件的组合成大的页面,这些小组件都是通过组合来达到复用的效果),单向数据流。

关键部分的实现思路
React 的重点概念有 JSX,虚拟 DOM,Diff 算法,setState 机制,这些重点概念自己是否能有他们的实现思路,甚至在没有看源码的情况下是否能自己根据思路实现出来。

这个可以看看胡子大叔写的blog,从零开始实现一个React

整体框架的知识体系
已经能熟练使用,也掌握了改框架的重点知识,是否能梳理出整个框架的知识体系,把每个知识点串起来,形成一张 react 知识网,网的每个节点都是一个知识点,连线就是他们之间的关系。

这个阶段基本上应付面试没啥问题了。

源码解读以及造轮子

这个源码解读基本上可以看做终极奥义了,其实大多数情况并没有必要去解锁这个终极奥义,因为源码解读确实比较费时间,特别是对于基础不牢固的同学,看几行代码就有看不懂的,又得去查资料搞懂。

对于文章开头提到的那种行为真的不提倡,作为一个前端,要学的知识那么多,每个都去看源码实现,哪里有那么多时间,不如好好想想怎么用现有的知识更好的去解决业务问题。

然后明白技术是为业务服务的,如果没有业务,技术将是无稽之谈。然而在我们大多数场景下,我们的业务是没有必要去造个轮子来解决,因为对于 react、vue 这种库来说,已经是非常的通用了,能解决 95% 以上的业务。

当然也有这些开源框架解决不了的问题,比如我有个业务是需要写一套代码,多端可以用的,比如写 vue 代码,这套代码也可以转换为 小程序代码,甚至是 Android 原生 、IOS 原生代码等,那么这个时候我们就必须得去看源码,才能更清晰的知道源码是怎么去处理每一个细节,才能造出更强大的轮子。

Last modification:July 26th, 2019 at 09:56 am

Leave a Comment