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

最新文章

热门文章

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