可视化 React 状态流和组件层次结构

功能包括：

React 应用程序由相互连接的组件构成，并且在开发应用程序时查看与简单的 React Dev 工具的连接可能会很繁琐且困难。

因此，我们决定构建一个开源的 Firefox和Chrome扩展程序来帮助查看组件。

Realize for React 是一款帮助开发者可视化 React 应用程序结构和状态流的工具，尤其适用于规模和复杂性不断增长的场景。目前支持 React v.16.8。

缩放和平移- 按住 Shift 键即可在树上进行拖动和缩放（要重新居中，只需单击中心按钮）

组件焦点- 单击节点即可在右侧面板中查看状态、属性和子项

状态流- 点击“状态”开关，在树状结构中显示状态流。有状态的组件带有蓝色节点，状态流则以蓝色链接显示。

搜索和突出显示- 在搜索栏中输入组件名称以查看所有匹配的节点脉动

我们是一个开源项目，您可以在这里做出贡献，如果您有任何疑问，请给我们留言