react 源码之setState
今天看了react源码,仅以记录。
1:monorepo (react 的代码管理方式)
与multirepo 相对。 monorepo是单代码仓库, 是把所有相关项目都集中在一个代码仓库中,每个module独立发布,每个module都有自己的依赖项(package.json
),能够作为独立的npm package发布,只是源码放在一起维护。
下图是典型monorepo目录图,react为例
2: setState
✋ setState "react/src/ReactBaseClasses.js"
* @param {object|function} partialState Next partial state or function to
* produce next partial state to be merged with current state.
* @param {?function} callback Called after state is updated.
* @final
* @protected
*/
Component.prototype.setState = function(partialState, callback) {
invariant(
typeof partialState === 'object' ||
typeof partialState === 'function' ||
partialState == null,
'setState(...): takes an object of state variables to update or a ' +
'function which returns an object of state variables.',
);
this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
可以看到,干了两件事情:第一:调用方法invariant(), 第二:调用 this.updater.enqueueSetState
✋ invariant() "shared/invariant" 让我们先去看看第一个方法干嘛了!
export default function invariant(condition, format, a, b, c, d, e, f) {
validateFormat(format); if (!condition) { // 导出了一个方法,可以看出如果condition为false的话, 抛出错误
let error;
if (format === undefined) {
error = new Error(
'Minified exception occurred; use the non-minified dev environment ' +
'for the full error message and additional helpful warnings.',
);
} else {
const args = [a, b, c, d, e, f];
let argIndex = 0;
error = new Error(
format.replace(/%s/g, function() {
return args[argIndex++];
}),
);
error.name = 'Invariant Violation';
} error.framesToPop = 1; // we don't care about invariant's own frame
throw error;
}
}
得出,这个方法就是判断partialState 的type, 不正确的话抛错误。 Facebook工程师把这个抛错误封装了成了invariant函数,嗯,以后工作中可以这样做!
✋ this.updater.enqueueSetState 让我们再去看看第二个是干嘛了!
首先,this.updater 什么鬼:
import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
/**
* Base class helpers for the updating state of a component.
*/
function Component(props, context, updater) {//在这个文件中导出了两个构造函数Component和PureComponent
this.props = props;
this.context = context;
// If a component has string refs, we will assign a different object later.
this.refs = emptyObject;
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue; // 这里是this.updater, 这个标黄的 是default updater
}
✋ ReactNoopUpdateQueue "react/src/ReactNoopUpdateQueue.js" 导出的一个对象,里面有好几个方法,其中一个就是setState用到的this.updater.enqueueSetState(this, partialState, callback, 'setState'):
enqueueSetState: function(
publicInstance, // 实例this
partialState, // 新的state
callback, // 回调
callerName,
) {
warnNoop(publicInstance, 'setState');
},
// 啊 这个里面是default updater
✋ enqueueSetState定义 "react-dom/src/server/ReactPartialRenderer.js" 实际的updater从哪里来的呢?哎,我是暂时没找到,但是,我知道这个实际的updater肯定有enqueueSetState方法,那我就全局搜索一下,找到enqueueSetState的定义:
let updater = { //这里是updater对象,里面各种方法
isMounted: function(publicInstance) {
return false;
},
enqueueForceUpdate: function(publicInstance) {
if (queue === null) {
warnNoop(publicInstance, 'forceUpdate');
return null;
}
},
enqueueReplaceState: function(publicInstance, completeState) {
replace = true;
queue = [completeState];
},
enqueueSetState: function(publicInstance, currentPartialState) {
if (queue === null) { // 这是一个错误情况,下面代码中warnNoop()方法就是在dev环境中给出空操作警告的
warnNoop(publicInstance, 'setState');
return null;
}
queue.push(currentPartialState); // 把现在要更新的state push到了一个queue中
},
};
// 接下来代码解决了我上面找不到实际updater的疑问!
let inst;
if (shouldConstruct(Component)) {
inst = new Component(element.props, publicContext, updater); // 在new的时候,就把上面真实的updater传进去啦!!!
.......后面还有好多,不过与我这一期无关了.
✋ queue 这是react提升性能的关键。并不是每次调用setState react都立马去更新了,而是每次调用setState, react只是push到了待更新的queue中! 下面是对这个queue的处理!
if (queue.length) {
let oldQueue = queue;
let oldReplace = replace;
queue = null;
replace = false; if (oldReplace && oldQueue.length === 1) { // 队列里面,只有一个,直接更换。
inst.state = oldQueue[0];
} else { // 队列里面有好几个,先进行合并,再更新
let nextState = oldReplace ? oldQueue[0] : inst.state;
let dontMutate = true;
for (let i = oldReplace ? 1 : 0; i < oldQueue.length; i++) {
let partial = oldQueue[i];
let partialState =
typeof partial === 'function'
? partial.call(inst, nextState, element.props, publicContext)
: partial;
if (partialState != null) { // 这里合并啦,新的是nextState
if (dontMutate) {
dontMutate = false;
nextState = Object.assign({}, nextState, partialState);
} else {
Object.assign(nextState, partialState);
}
}
}
inst.state = nextState; //最后赋值给实例
}
} else {
queue = null;
}
react 源码之setState的更多相关文章
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- React源码 commit阶段详解
转: React源码 commit阶段详解 点击进入React源码调试仓库. 当render阶段完成后,意味着在内存中构建的workInProgress树所有更新工作已经完成,这包括树中fiber节点 ...
- React源码解析:ReactElement
ReactElement算是React源码中比较简单的部分了,直接看源码: var ReactElement = function(type, key, ref, self, source, owne ...
- React 源码剖析系列 - 不可思议的 react diff
简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 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 ...
随机推荐
- 安卓开发学习笔记(一):如何用Android Stuidio导出apk文件?
一,首先,我们在菜单栏上找到这一栏: 然后点击build,再点击generate apk,然后出现以下界面: 由于之前我们并没有进行apk文件的生成,因此需要这个apk key做一个验证,以防您的ap ...
- 浅谈Java中的锁:Synchronized、重入锁、读写锁
Java开发必须要掌握的知识点就包括如何使用锁在多线程的环境下控制对资源的访问限制 ◆ Synchronized ◆ 首先我们来看一段简单的代码: 12345678910111213141516171 ...
- PowerShell 中 RunspacePool 执行异步多线程任务
在 PowerShell 中要执行任务脚本,现在通常使用 Runspace,效率很高:任务比较多时,用 Runspace pool 来执行异步操作,可以控制资源池数量,就像 C# 中的线程池一样 == ...
- 武汉软件开发:一看就会的wpf入门教程
据了解,目前武汉软件开发市场关于PC端桌面开发的技术主要有两块:winform和wpf.wpf是微软既winform之后推出的一套新的桌面开发技术.采用数据驱动的方式可以轻松编写出非常炫的界面. 1. ...
- Linux如何配置想要的JDK
首先我声明下,对于linux系统我到现在学习不到一个星期,所以说很多地方不熟悉,还在学习当中,本文章中有什么技术错误请勿怪哈(PS:我第一次发表博客). 关于linux安装配置jdk,首先我用的是De ...
- mogodb分片配置
下图展示了在MongoDB中使用分片集群结构分布: 上图中主要有如下所述三个主要组件: Shard: 用于存储实际的数据块,实际生产环境中一个shard server角色可由几台机器组个一个repli ...
- .net core使用EasyNetQ做EventBus
随着SOA.微服务.CQRS的盛行,EventBus越来越流行,上GitHub搜了一下,还是有蛮多的这类实现,老牌的有NServiceBus(收费).MassTransit,最近的有CAP(国人写的, ...
- asp.net core 系列 9 环境(Development、Staging 、Production)
一.在asp.net core中使用多个环境 ASP.NET Core 配置是基于运行时环境, 使用环境变量.ASP.NET Core 在应用启动时读取环境变量ASPNETCORE_ENVIRONME ...
- Python爬虫入门教程 3-100 美空网数据爬取
美空网数据----简介 从今天开始,我们尝试用2篇博客的内容量,搞定一个网站叫做"美空网"网址为:http://www.moko.cc/, 这个网站我分析了一下,我们要爬取的图片在 ...
- C#版 - Leetcode 65. 有效数字 - 题解
版权声明: 本文为博主Bravo Yeung(知乎UserName同名)的原创文章,欲转载请先私信获博主允许,转载时请附上网址 http://blog.csdn.net/lzuacm. Leetcod ...