react-devtool 消息处理渲染 源码理解
react-devtools 有chrome插件版,但在chrome 插件下的通信调试不够透明,且chrome 的插件特别是开发工具界面几乎无法调试。 看到了react-devtools 也提供electron 版本的调试工具。 正好学习一下。
文件结构:
react-devtools-core/standalone.js : 渲染进程js
react-devtools/app.js:主进程js
react-devtools-core/src/backend.js: 提供网页加载的client.js。(解析__REACT_DEVTOOLS_GLOBAL_HOOK__ 钩子变量, 发送消息给websocket 服务器, 这里需要手动引入,插件版通过injectscript 注入)
standalone.js 起一个 websocket 服务 和http 服务。
建立连接后, reload 渲染面板。
function reload() {
ReactDOM.unmountComponentAtNode(node);
node.innerHTML = '';
setTimeout(() => {
panel = ReactDOM.render(<Panel {...config} />, node);
}, 100);
}
知识点:
requestIdleCallback:利用帧空闲时间来触发执行的函数。而且是一个低优先级的函数,如果帧一直没有空闲时间,那就一直不执行,除非时间过了设定的Timeout。
requestIdleCallback(myNonEssentialWork, { timeout: 2000 });
let tasks = {
length: 4
}
function myNonEssentialWork (deadline) {
// 当回调函数是由于超时才得以执行的话,deadline.didTimeout为true
// deadline.timeRemaining() 获取每一帧还剩余的时间
while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && tasks.length > 0) {
console.log('done', tasks, deadline.timeRemaining())
tasks.length = tasks.length - 1
}
if (tasks.length > 0) {
requestIdleCallback(myNonEssentialWork);
}
}
this._bridge._listeners:
{
'root': [null],
'mount': [null],
'update': [null],
'updateProfileTimes': [null],
'unmount': [null],
'setInspectEnabled': [null],
'inspectedHooks': [null],
'select': [null],
'storeSnapshot': [null],
'clearSnapshots': [null],
'capabilities': []
}
websocket: 心跳机制
react-devtool 消息处理渲染 源码理解的更多相关文章
- Caffe源码理解2:SyncedMemory CPU和GPU间的数据同步
目录 写在前面 成员变量的含义及作用 构造与析构 内存同步管理 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 在Caffe源码理解1中介绍了Blob类,其中的数据成 ...
- 基于SpringBoot的Environment源码理解实现分散配置
前提 org.springframework.core.env.Environment是当前应用运行环境的公开接口,主要包括应用程序运行环境的两个关键方面:配置文件(profiles)和属性.Envi ...
- jedis的源码理解-基础篇
[jedis的源码理解-基础篇][http://my.oschina.net/u/944165/blog/127998] (关注实现关键功能的类) 基于jedis 2.2.0-SNAPSHOT ...
- VUEJS2.0源码理解--优
VUEJS2.0源码理解 http://jiongks.name/blog/vue-code-review/#pingback-112428
- AdvanceEast源码理解
目录 文章思路 源码理解 一. 标签点形式 按顺序排列四个点,逆时针旋转,且第一个点为左上角点(刚开始选择最左边的点, 二. 标签切边 三. loss计算 四. NMS 最后说明 文章思路 大神的gi ...
- Pytorch学习之源码理解:pytorch/examples/mnists
Pytorch学习之源码理解:pytorch/examples/mnists from __future__ import print_function import argparse import ...
- .NET Core 3.0之深入源码理解Startup的注册及运行
原文:.NET Core 3.0之深入源码理解Startup的注册及运行 写在前面 开发.NET Core应用,直接映入眼帘的就是Startup类和Program类,它们是.NET Core应用程 ...
- 深入源码理解Spring整合MyBatis原理
写在前面 聊一聊MyBatis的核心概念.Spring相关的核心内容,主要结合源码理解Spring是如何整合MyBatis的.(结合右侧目录了解吧) MyBatis相关核心概念粗略回顾 SqlSess ...
- HashMap源码理解一下?
HashMap 是一个散列桶(本质是数组+链表),散列桶就是数据结构里面的散列表,每个数组元素是一个Node节点,该节点又链接着多个节点形成一个链表,故一个数组元素 = 一个链表,利用了数组线性查找和 ...
随机推荐
- vector 的用法--------------自绘资源
创建 命名 选择根元素 当然你也可以选择其他元素 属性介绍vector 元素 name:定义该矢量图形的名字.通过名字找到这个矢量图width,height:定义该矢量图形的固有宽高(必须的,矢量图内 ...
- unity读取txt,并且生成vector3的数组
读取txt的脚本: public void ReadFileTX(){ var str = File.ReadAllText(Application.streamingAssetsPath + &qu ...
- js操作:selenium无法操作隐藏元素问题
对于前端隐藏元素,一直是selenium自动化定位元素的隐形杀手,脚本跑到隐藏元素时位置时报各种各样的错误, 隐藏的下拉菜单又没有办法避免,此帖只为交流隐藏元素自动化定位处理方法(3种操作) ...
- br-lan、eth0、eth1及lo (转)
如果你的设备含有不少于1个的LAN接口,那这个设备在不同的接口之间可能有一个被称为交换(switch)的特殊连接.大多数的内部构造如下图所示: Linux 系统下输入ifconfig命令,会有如下输出 ...
- 论文阅读 | A Curriculum Domain Adaptation Approach to the Semantic Segmentation of Urban Scenes
paper链接:https://arxiv.org/pdf/1812.09953.pdf code链接:https://github.com/YangZhang4065/AdaptationSeg 摘 ...
- docker hub加速访问设置
前言:docker是国外的,虽然有个版本开源免费,但是其docker hub还是在国外,刚刚安装后,拉镜像就会发现,连接请求超时,中断服务,这是因为防火墙的问题,所以要将源指向国内的知名docker ...
- Java获取Ip发送邮件
import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang3.StringUtils; import javax.servlet. ...
- java集成swagger
概览: java集成Swagger Swagger-UI的使用 Springboot跨域请求的访问解决 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 W ...
- Android键盘显示和隐藏
一.不自动弹出键盘: 带有EditText控件的在第一次显示的时候会自动获得focus,并弹出键盘,如果不想自动弹出键盘,有两种方法: 方法一:在mainfest文件中把对应的activity设置 a ...
- C++ vector的用法(整理)
vector 是向量类型,它可以容纳许多类型的数据,如若干个整数,所以称其为容器.vector 是C++ STL的一个重要成员,使用它时需要包含头文件: #include<vector>; ...