导语

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一样,但是实际上少了一分查找的过程

初入React源码(一)的更多相关文章

  1. React源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...

  2. React源码解析:ReactElement

    ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...

  3. react 源码之setState

    今天看了react源码,仅以记录. 1:monorepo (react 的代码管理方式) 与multirepo 相对. monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个mo ...

  4. React 源码剖析系列 - 不可思议的 react diff

      简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...

  5. React 源码剖析系列 - 生命周期的管理艺术

    目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...

  6. 读react源码准备

    git源码地址:https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码,react源码非常的少,总 ...

  7. react源码之render

    1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:

  8. React躬行记(16)——React源码分析

    React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...

  9. React源码之组件的实现与首次渲染

    react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...

随机推荐

  1. 在markdown中怎么划线?-[markdown]

    使用html标签:<hr/> 示例: 百灵鸟,飞过蓝天. <hr/> 我爱你,我亲爱的祖国. <hr/> 生为华夏傲骨,死是华夏精魂. 效果: ![](https: ...

  2. xmind转为markdown

    先将xmind导出为.opml 将opml导入Typora (需要安装pandoc)

  3. Vue里面提供的三大类钩子及两种函数

    在路由跳转的时候,我们需要一些权限判断或者其他操作.这个时候就需要使用路由的钩子函数. 定义:路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数. 总体来讲vue里面提供了三大类钩子 ...

  4. vue使用axios发送post请求时的坑及解决原理

    前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...

  5. const不同位置带来的区别

    const不同位置带来的区别 今天同学问我数据结构时,我对以下代码懵了一下: template <class T> class Link{ public: T data; Link< ...

  6. shell查询目标jvm的perm占比

    #查询指定进程号下面的方法区使用率,jdk1.7是perm,jdk1.8是metaspace function get_perm_use_percent() { pid="$1" ...

  7. Java反射中getDeclaredField和getField的区别

    getDeclaredField是可以获取一个类的所有字段. getField只能获取类的public 字段. public Field getDeclaredField(String name) t ...

  8. window部署ftp服务器

                                                                                                         ...

  9. php--理解PHP的依赖注入和laravel的服务容器

    写在前面 为了了解laravel的服务容器在网上搜了许多文章,其中大多数都有其侧重点,没有很系统的一套东西以供参考,看完之后仍觉似乎少了一根把他们串起来的绳子,近期有幸拜读了陈昊的<Larave ...

  10. 22.1 Extends 继承的 方法重写、@Override的使用、

    /* * 继承中成员方法的特点 * 子类中没有这个方法,调用父类的 * 子类中重写了这个方法,调用子类的 * 方法的重写:在子父类当中,子类的方法和父类的完全一样,子类重写了父类的方法(覆盖),当子类 ...