导语

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. 7L-双线链表实现

    链表是基本的数据结构,尤其双向链表在应用中最为常见,LinkedList 就实现了双向链表.今天我们一起手写一个双向链表. 文中涉及的代码可访问 GitHub:https://github.com/U ...

  2. 22 Extends 继承(子类、父类)

    本章主要介绍继承的 概念.方法重写(@Override注解的使用).使用场景.方法的执行顺序 /*1.继承的 概念 * 继承:多个类有共同的成员变量和成员方法,抽取到另外一个类中(父类),在让多个类去 ...

  3. 八、路由详细介绍之动态路由OSPF(重点)

    一.OSPF介绍 OSPF优点:无环路.收敛快.扩展性好.支持认证 二.工作原理: 图中RTA.RTB.RTC每个路由器都会生成一个LSA, 通过LSA泛洪进行互相发送相互学习,形成LSDB (链路状 ...

  4. 如何提高你使用windows的逼格(windows用成Linux的赶脚)

    一.准备工作 作为一个整洁而有内涵的人,电脑桌面一定要清洁 二.桌面整洁了,软件怎么打开呢?     方案一 方案二.敲重点   我们可以使用终端指令打开windows安装的任意软件: 打开Windo ...

  5. 大数据篇:Spark

    大数据篇:Spark Spark是什么 Spark是一个快速(基于内存),通用,可扩展的计算引擎,采用Scala语言编写.2009年诞生于UC Berkeley(加州大学伯克利分校,CAL的AMP实验 ...

  6. webWMS开发过程记录(四)- 整体设计

    分层 View(Servlet/Action/JSP)--> Service(接口/实现类) --> Dao(接口/实现类) 所用技术 Struts2 Hibernate Spring J ...

  7. 同事上班时间无聊,用python敲出贪吃蛇游戏打发时间

    自从学会啦python,再也不用担心上班时间老板发现我打游戏啦 贪吃蛇代码: 还有不懂的(https://www.ixigua.com/i6808019824560570888/)这里有视频教程. 如 ...

  8. C# 基础知识系列- 11 委托和事件

    0. 前言 事件和委托是C#中的高级特性,也是C#中很有意思的一部分.出现事件的地方,必然有委托出现:而委托则不一定会有事件出现.那为什么会出现这样的关系呢?这就需要从事件和委托的定义出发,了解其中的 ...

  9. stand up meeting 12-7

    weekend updates: 1.答题界面和结果界面的跳转和数据传输已全部完成. 2.答题界面完成简单的getRankingData API结果展示,答题时间,错误数目和错题题目的展示,点击题目可 ...

  10. 068.Python框架Django之DRF视图集使用

    一 视图集与路由的使用 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() ...