通過React Fiber本身的測試用例，一步一步除錯它的原始碼，直觀感受下它的執行機制

Kirk-Wang發表於2019-02-28
React除錯原始碼

大家都知道，React Fiber是React全新的Reconciler（Reconciler就是我們通常所說的Virtual DOM，用來計算新老View的差異。）

油管上作者對它的解釋，翻牆自備梯子

在我們看完N多大神對它的解釋後，但是如果不親自除錯下它的原始碼（全新用ES6寫了），說實話我心裡還是想說（「Talk is cheap. Show me the code」）^_^。

我們在作者提供的”PULL_REQUEST_TEMPLATE.md”，有看到如何除錯，見下圖：

通過React Fiber本身的測試用例，一步一步除錯它的原始碼，直觀感受下它的執行機制

可是可以，它需要開啟chrome來弄，還需要先在測試用例中寫個debugger，Source Map也需要弄等等。

那我們該如何在ES6的原始碼中直接下斷點調它呢？估計大家想到了，最好的方式就是祭出VSCode這個神器。

但還是要些許配置，才能跑起來。因為它的單元測試都是Jest寫的，所以我去它的官網去找Debugging in VS Code。但很遺憾作者給出的不試我們想要的。不過，不用擔心。VSCode官網Debugging Recipes部分有提供一個vscode-recipes倉庫，裡面有各種基於VSCode除錯的專案例子。

通過React Fiber本身的測試用例，一步一步除錯它的原始碼，直觀感受下它的執行機制

我們找到debugging-jest-tests。先上個圖感受下。

current

好是好，但我們的原始碼是ES6，並且有import，所以還需要在args裡面加上babel-register。

那麼最終的launch.json配置是：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Current File",
      "program": "${workspaceRoot}/node_modules/jest/bin/jest",
      "args": [
        "babel-register",
        "${file}",
        "--config",
        "./scripts/jest/config.source.js",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "env": {
        "NODE_ENV": "development"
      }
    }
  ]
}
複製程式碼

是不是很簡單，--config和--runInBand的用法在Jest CLI Options有詳細說明。在這裡我是直接把react專案本身package.json裡面scripts部分的debug-test配置直接移過來的，沒啥其它：

"debug-test": "cross-env NODE_ENV=development node --inspect-brk node_modules/.bin/jest --config ./scripts/jest/config.source.js --runInBand"

好，現在我們在這個由1000多位大神所貢獻的專案中隨便找一個有setState的測試用例，下個斷點，按F5執行一下：

通過React Fiber本身的測試用例，一步一步除錯它的原始碼，直觀感受下它的執行機制

OK，搞定！

最後，祝大家生活愉快！

相關文章