（翻译）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），码上获取更多优质干货！