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 消息处理渲染 源码理解

react-devtool 消息处理渲染源码理解