初入React源码（一）

导语

React是我接触的第二个框架，我最初开始接触的是vue，但是并没有深入的理解过vue，然后在工作过程中，我开始使用了React，现在已经觉得React会比vue更加实用，但是这只是个人观点，可能只是我更喜欢React的写法吧，会给我一种代码界面比较清晰的感觉，所以我开始逐步的去准备了解这个玩意

因为在这之前我只看过官方文档,所以我想按照React中JS存放的顺序，一个个去研究，可能会花费比较长的时间

Index.js

引入了React.js

React.js

它只做了一件事情，整合了所有我们开发中使用到的基础类以及方法，并export出React类。

ReactBaseClasses.js

这是我们常用的Component 以及 PureComponent的封装类。

构造函数

Component 的构造函数中，只申请私有的 prop ， context ， refs ， updater 属性

invariant 的方法库

params：
condition, format, a, b, c, d, e, f
复制代码

判断传入的condition的真实性，如果为假，即返回format中的错误信息

在ReactBaseClasses中：

component.prototype.setState函数中验证传入的是否为Object或者为function类型，由此可见，我们常用的setState是挂载在component的原型链上的

那setState具体操作了啥呢？

setState的时候最后调用了this.updater，而在构造函数中有这么一句话

this.updater = updater || ReactNoopUpdateQueue;
复制代码

意思就是我们可以自定义自己的updater方法，如果不传入的话，会依托于React封装的 ReactNoopUpdateQueue 库，后续会自己介绍.

再往下看下去，我们会看到这么一段话

Component.prototype.forceUpdate = function(callback) {
  this.updater.enqueueForceUpdate(this, callback, 'forceUpdate');
};
复制代码

说明，我们的 Component 中的 forceUpdate 实际上也是用 ReactNoopUpdateQueue 来进行封装的方法

除了Component意外，同时还输出了PureComponent，基本结构一样，只是将Component原型链上的方法，直接赋予给PureComponent，减少了从原型链上查找的过程

所以，从这方面说明， 使用PureComponent虽然效果跟Component一样，但是实际上少了一分查找的过程