基于React版本16的源码解析(一):组件实现(小白可读)

原创 amandakelake 教程 框架与工具 162阅读 2018-03-09 20:00:41 举报

我在学习过程中喜欢做记录,分享的是我在前端之路上的一些积累和思考,也希望能跟大家一起交流与进步。
这是我的github博客,欢迎一起学习,欢迎star

本次分析的源码采用的是16.2.0的版本
目前网上现有的react源码分析文章基于的都是版本16以前的源码,入口和核心构造器不一样了,如下图所示

水平有限,如果有错误和疏忽的地方,还请指正。

最快捷开始分析源码的办法

然后打开项目,进入node_nodules => react
先看入口文件index.js

我们就看开发环境下的版本吧,压缩版本是打包到生产环境用的

打开图中文件即可

核心接口

分析源码先找对外的暴露接口,当然就是react了,直接拉到最下面

ReactChildren

ReactChildren提供了处理 this.props.children 的工具集,跟旧版本的一样

组件

旧版本只有ReactComponent一种
新版本定义了三种不同类型的组件基类ComponentPureComponentunstable_AsyncComponent

等下再具体看都是什么

生成组件

判断组件:isValidElement

校验是否是合法元素,只需要校验类型,重点是判断.$$typeof属性

_assign

其实是object-assign,但文中有关键地方用到它,下文会讲
var _assign = require('object-assign');

React组件的本质

组件本质是对象

不急着看代码,先通过例子看看组件是什么样子的
creact-react-app生成一个最简单的react项目
App.js文件加点东西,然后打印组件A看一下是什么

npm start启动项目看看

其实就是个对象,有很多属性,注意到props里面, 没有内容
给组件A里面包含一点内容


可以看到,props.children里面开始嵌套内容了
那以我们聪明的程序员的逻辑来推理一下,其实不断的页面嵌套,就是不断的给这个对象嵌套props而已
不信再看一下

虚拟DOM概念

所以到目前为止,我们知道了react的组件只是对象,而我们都知道真正的页面是由一个一个的DOM节点组成的,在比较原生的jQuery年代,通过JS来操纵DOM元素,而且都是真实的DOM元素,而且我们都知道复杂或频繁的DOM操作通常是性能瓶颈产生的原因
所以React引入了虚拟DOM(Virtual DOM)的概念
React虚拟DOM浅析 | AlloyTeam
总的说起来,无论多复杂的操作,都只是先进行虚拟DOM的JS计算,把这个组件对象计算好了以后,再一次性的通过Diff算法进行渲染或者更新,而不是每次都要直接操作真实的DOM。
在即时编译的时代,调用DOM的开销是很大的。而Virtual DOM的执行完全都在Javascript 引擎中,完全不会有这个开销。

知道了什么是虚拟DOM以及组件的本质后,我们还是来看一下代码吧
先从生成组件开始切入,因为要生成组件就肯定会去找组件是什么
createElement: createElementWithValidation,

组件的本源

知道了组件是对象后,我们去看看它的本源

摘取一些核心概念出来看就好

可以看到,返回了一个element,这个元素又是由createElement方法生成的,顺着往下找

返回的是ReactElement方法,感觉已经很近了,马上要触及本源了

bingo,返回了一个对象,再看这个对象,是不是跟上面打印出来的对象格式很像?再看一眼

这就是组件的本源

组件三种基类

前面说了,版本16以后,封装了三种组件基类:分别是组件、纯组件、异步组件

一个个去看一下区别在哪里,先看 Component

很简单,一个构造函数,通过它构造的实例对象有三个私有属性,refs则是个emptyObject,看名字就知道是空对象
这个emptyObject也是引入的插件
var emptyObject = require('fbjs/lib/emptyObject');

再去看PureComponentAsyncComponent,定义的时候居然跟Component是一样的

都是这四句话

区别呢?这里就要比较理解原型链方面的知识了
虽然原型和继承在日常项目和工作中用的不多,那是因为我们在面向过程编程,但想要进阶,就要去读别人的源码,去自己封装组件,这事它们就派上用场了,这就是为什么它们很重要的原因。

核心的方法,和属性,以及这三种组件直接的关系都是通过原型的知识联系起来的,关键代码如下,我画了个简图,希望能对看文章的各位有所帮助,如果有画错的,希望能指正我

先上核心代码
setStateforceUpdate这两个方法挂载Component(组件构造器)的原型上

定义一个ComponentDummy,其实也是一个构造器,按照名字来理解就是“假组件”😂,它是当做辅助用的

让ComponentDummy的原型指向Component的原型,这样它也能访问原型上面的共有方法和属性了,比如setState和forceUpdate

这句话,假组件构造器ComponentDummy实例化出来一个对象pureComponentPrototype,然后把这个对象的constructor属性又指向了PureComponent,因此PureComponent也成为了一个构造器,也就是上面的第二种组件基类

AsyncComponent基类也是一样

但是AsyncComponent的原型多了一个方法render,看到了吗,妈妈呀,这就是render的出处

所以到目前为止,可以得出一个原型图

但是,有个问题来了,render方法挂载在AsyncComponent的原型上,那通过Component构造器构造出来的实例岂不是读不到render方法,那为什么日常组件是这样写的?

还有两句代码,上面做了个小剧透的_assign

每句话上面还特意有个注释,Avoid an extra prototype jump for these methods.,避免这些方法额外的原型跳转,先不管它,先看_assign做了什么,
把Component的原型跟AsyncComponent的原型合并
那么这里答案就呼之欲出了,如此一来,AsyncComponent上面的render方法,不就相当于挂载到Component上面了吗?

以此类推,三种基类构造器最后都是基于同一个原型,共享所以方法,包括render、setState、forceUpdate等等,最后的原型图应该就变成了这样

到这里,有个问题要思考的是?
既然最后三个基类共用同一个原型,那为什么要分开来写?
中间还通过一个假组件构造器ComponentDummy来辅助构建两个实例

源码还没读完,这个地方我目前还没弄明白,应该是后面三个基类又分别挂载了不一样的方法,希望有大佬能提前回答一下

这是我的github博客,我在学习过程中喜欢做记录,分享的是我在前端之路上的一些积累和思考,也希望能跟大家一起交流与进步,能给个star的话就更加感激不尽了
https://github.com/amandakelake/blog

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复