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(, 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: 心跳机制