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: 心跳機制