初入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一样,但是实际上少了一分查找的过程
初入React源码(一)的更多相关文章
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React源码解析:ReactElement
ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...
- react 源码之setState
今天看了react源码,仅以记录. 1:monorepo (react 的代码管理方式) 与multirepo 相对. monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个mo ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- 读react源码准备
git源码地址:https://github.com/facebook/react react 里面就是 react源码 react里面的react文件夹就是react源码,react源码非常的少,总 ...
- react源码之render
1.最近学习react源码,刚刚入门,看了render的原理,到了fiberRoot的创建 如图:
- React躬行记(16)——React源码分析
React可大致分为三部分:Core.Reconciler和Renderer,在阅读源码之前,首先需要搭建测试环境,为了方便起见,本文直接采用了网友搭建好的环境,React版本是16.8.6,与最新版 ...
- React源码之组件的实现与首次渲染
react: v15.0.0 本文讲 组件如何编译 以及 ReactDOM.render 的渲染过程. babel 的编译 babel 将 React JSX 编译成 JavaScript. 在 ba ...
随机推荐
- 7L-双线链表实现
链表是基本的数据结构,尤其双向链表在应用中最为常见,LinkedList 就实现了双向链表.今天我们一起手写一个双向链表. 文中涉及的代码可访问 GitHub:https://github.com/U ...
- 22 Extends 继承(子类、父类)
本章主要介绍继承的 概念.方法重写(@Override注解的使用).使用场景.方法的执行顺序 /*1.继承的 概念 * 继承:多个类有共同的成员变量和成员方法,抽取到另外一个类中(父类),在让多个类去 ...
- 八、路由详细介绍之动态路由OSPF(重点)
一.OSPF介绍 OSPF优点:无环路.收敛快.扩展性好.支持认证 二.工作原理: 图中RTA.RTB.RTC每个路由器都会生成一个LSA, 通过LSA泛洪进行互相发送相互学习,形成LSDB (链路状 ...
- 如何提高你使用windows的逼格(windows用成Linux的赶脚)
一.准备工作 作为一个整洁而有内涵的人,电脑桌面一定要清洁 二.桌面整洁了,软件怎么打开呢? 方案一 方案二.敲重点 我们可以使用终端指令打开windows安装的任意软件: 打开Windo ...
- 大数据篇:Spark
大数据篇:Spark Spark是什么 Spark是一个快速(基于内存),通用,可扩展的计算引擎,采用Scala语言编写.2009年诞生于UC Berkeley(加州大学伯克利分校,CAL的AMP实验 ...
- webWMS开发过程记录(四)- 整体设计
分层 View(Servlet/Action/JSP)--> Service(接口/实现类) --> Dao(接口/实现类) 所用技术 Struts2 Hibernate Spring J ...
- 同事上班时间无聊,用python敲出贪吃蛇游戏打发时间
自从学会啦python,再也不用担心上班时间老板发现我打游戏啦 贪吃蛇代码: 还有不懂的(https://www.ixigua.com/i6808019824560570888/)这里有视频教程. 如 ...
- C# 基础知识系列- 11 委托和事件
0. 前言 事件和委托是C#中的高级特性,也是C#中很有意思的一部分.出现事件的地方,必然有委托出现:而委托则不一定会有事件出现.那为什么会出现这样的关系呢?这就需要从事件和委托的定义出发,了解其中的 ...
- stand up meeting 12-7
weekend updates: 1.答题界面和结果界面的跳转和数据传输已全部完成. 2.答题界面完成简单的getRankingData API结果展示,答题时间,错误数目和错题题目的展示,点击题目可 ...
- 068.Python框架Django之DRF视图集使用
一 视图集与路由的使用 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() ...