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节点,该节点又链接着多个节点形成一个链表,故一个数组元素 = 一个链表,利用了数组线性查找和 ...
随机推荐
- Vuex数据可视化
参考:https://gitee.com/hjm100/codes/46towe9v28a1bxfqhc7kl34 Vuex虽然能存储数据,但是一刷新就没有了,如果要实现数据持久化,就需要用vuex- ...
- win10+caffe+GPU
由于学习需要,决定安装caffe,之前用的都是基于theano的keras.听说win下caffe很难配置,经过一个下午和晚上的配置终于成功,以此记录. 我的电脑:win10 64位,N卡GTX950 ...
- Win10安装java环境
window系统安装java 一.下载JDK 1.首先需要下载java开发工具包JDK,下载地址:http://www.oracle.com/technetwork/java/javase/downl ...
- 会话技术、Cookie技术与Session技术
一.会话技术 1. 存储客户端状态 会话技术是帮助服务器记住客户端状态(区分客户端)的. 2. 会话技术 从打开一个浏览器访问某个站点,到关闭这个浏览器的整个过程,称为一次会话.会话技术就是记录这 ...
- String Formatting in C#
原文地址 http://blog.stevex.net/string-formatting-in-csharp/ When I started working with the .NET framew ...
- tensorflow建造神经网络-【老鱼学tensorflow】
上次我们添加了一个add_layer函数,这次就要创建一个神经网络来预测/拟合相应的数据. 下面我们先来创建一下虚拟的数据,这个数据为二次曲线数据,但同时增加了一些噪点,其图像为: 相应的创建这些伪造 ...
- Doctrine2-完整创建数据库
---恢复内容开始--- 下面用Doctrine2设置配置一个数据库,具体分为以下步骤 1.设计主要字段和表 2.配置symfony2和数据库的连接 3.配置Entity,定义类 4.实现get/se ...
- Hbase命令
进入hbase shell命令行 bin/hbase shell HBase Shell; enter 'help' for list of supported commands. Type &quo ...
- java SSM 解决跨域问题
什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源.比如从www.baidu.com 页面去请求 www.google.com 的资源.跨域的严格一点的定义是:只要 协议,域名,端口有任何一个 ...
- Android ble蓝牙问题
(1)蓝牙回调安卓4.4的蓝牙回调是在异步线程中(不在主线程),若要在蓝牙回调中执行更新界面的操作,记得切换到主线程去操作 (2)三星手机兼容性问题connectGatt()方法在某些三星手机上只能在 ...