原文链接：

作者：

随着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在某个组件中是不可访问的，那么用户可以在树中查找以确定它传递失败的位置。

入门

您可以从安装React Scope。如果您有任何想法或建议，请给我们反馈。这是我们每个人热爱的项目，我们正在积极探索改善它的方法。

了解更多信息，请访问和。

关注微信公众号：创宇前端（KnownsecFED），码上获取更多优质干货！