（翻譯）React Scope介紹

原文連接：React Scope

做者：Tiffany Lin

隨着React應用程序複雜度的增加，components、state 、props的複雜性也變得愈來愈高。上個月，一些開發人員和我對於這個問題創建瞭解決方案。咱們決定開發Chrome的插件React Scope，它提供了開發人員的React應用程序組件的分層樹視圖。

React Scope也是交互式的；當開發者在他們的應用中（例如：經過點擊事件或者輸入表單）觸發state的變化，這個樹形的表就相應的更新。形象的展示state的變化和分清props從哪裏傳遞下來可使得調試React應用變得更加簡單。

如何工做

React Scope利用React Developer Tools來檢索有關客戶端應用程序的信息。而後，咱們使用這些數據來實現DOM樹的可視化。用戶只需將鼠標懸停在樹內的節點上便可查看每一個組件的name、state和props。

接下來，開發人員能夠與他們的React應用程序交互來觸發狀態更改。 React Scope將這些數據保存在一個緩存中，該緩存鏈接到一個監聽器函數跟蹤狀態的變化。

最後，React Scope提供了previous和next按鈕。點擊這些呈現從緩存到樹的數據，容許開發人員在他們的應用程序的當前和以前的狀態間time travel。

技術挑戰

創建React Scope帶來了一系列技術挑戰，這些挑戰提高了咱們的極限。可是隨着挑戰的提高，咱們從這個項目學到了不少。 這是咱們必須解決的主要技術障礙：

檢索客戶端應用程序數據

咱們利用React Developer Tools的fiber root（以及React 15及如下版本渲染器）來獲取客戶端的應用數據，這些數據返回了一個對象。因爲對象嵌套嚴重，所以解析這個特別困難。咱們編寫了遞歸函數來提取必要的數據（組件name、state 和 props），而後根據D3.js的嚴格格式進行格式化。

處理異步事件

因爲iframe與主瀏覽器窗口之間的異步關係，從React Developer Tools獲取數據有點棘手。咱們使用Async / Await來確保從用戶應用程序傳遞給React Scope的數據是準確的。

管理state數據

最後，咱們須要肯定一個可行的緩存系統來存儲初始和隨後的狀態改變數據。咱們肯定一個雙向鏈表的線性結構是最有意義的。咱們將客戶端應用程序的初始狀態存儲爲head/tail，並將任何新的狀態數據添加到head。而後，當用戶點擊previous和next按鈕，咱們應用鏈表邏輯來呈現相關的狀態數據。例如，若是他們點擊previous按鈕，咱們的應用程序將訪問當前狀態的node.prev.value並將該數據呈現給樹形圖。

爲何咱們相信它

咱們相信React Scope有可能簡化React應用程序開發，特別是咱們的state time traveling功能。例如，若是用戶的輸入觸發意外的狀態變化，開發人員能夠簡單地引用先前的狀態來肯定發生錯誤的位置。

並且，可以很容易地看到props如何傳遞，可使調試變得更容易。例如，若是一個props在某個組件中是不可訪問的，那麼用戶能夠在樹中查找以肯定它傳遞失敗的位置。

入門

您能夠從Chrome網上應用店安裝React Scope。若是您有任何想法或建議，請給咱們反饋。這是咱們每一個人熱愛的項目，咱們正在積極探索改善它的方法。

瞭解更多信息，請訪問React Scope官網和GitHub。

---

關注微信公衆號：創宇前端（KnownsecFED），碼上獲取更多優質乾貨！