反冲物料
If you’re here, you probably have heard about or use React. Thank you for taking the time to stop by. We assume you know a little about state management and we know your time is precious so we’ll keep it short and dense; no fluff here, onward!
如果您在这里，您可能已经听说或使用过React。 感谢您抽出宝贵的时间。 我们假设您对状态管理有所了解，并且知道您的时间很宝贵，因此我们将使其简短而密集。 从这里开始没有绒毛！
Our team’s latest mission was integrating Recoil.js into a visual React state debugger. Recoil was invented at Facebook to solve a few of the limitations that Context API has, i.e. its difficult to share state, state can only store a single value, and code-splitting is challenging.
我们团队的最新任务是将Recoil.js集成到可视化React状态调试器中。 Recoil是在Facebook上发明的，用于解决Context API具有的一些局限性，即它难以共享状态，状态只能存储单个值，并且代码拆分非常具有挑战性。
Recoil aims to address these limitations by, in their own words, “ defin[ing] a directed graph orthogonal to but also intrinsic and attached to your React tree. State changes flow from the roots of this graph (which we call atoms) through pure functions (which we call selectors) and into components.
Recoil旨在通过用自己的话语来解决这些局限性，即“定义与您的React树正交但又内在且有向的有向图。 状态变化从该图的根(我们称为原子)开始，通过纯函数(我们称为选择器)进入组件。
Directed Graph — “ In mathematics, and more specifically in graph theory, a directed graph (or digraph) is a graph that is made up of a set of vertices connected by edges, where the edges have a direction associated with them.”
有向图 -“在数学中，更具体地说在图论中，有向图(或有向图)是由一组由边连接的顶点组成的图，其中边具有与之关联的方向。”
Orthagonality — “ Orthogonality is a system design property which guarantees that modifying the technical effect produced by a component of a system neither creates nor propagates side effects to other components of the system.”
正交性-“正交性是一种系统设计属性，它保证修改由系统组件产生的技术效果既不会产生副作用，也不 会将 副作用传播到系统的其他组件。”
Our project involves a throttled traversal of the React Fiber to extract state data in order to pass to our D3 visualization toolset. It then illustrates the relationships between your atoms, selectors, and components. Neat right?
我们的项目涉及对React Fiber进行节流遍历以提取状态数据，以便传递给我们的D3可视化工具集。 然后说明了原子，选择器和组件之间的关系。 整洁吧？
We found that Atoms and Selectors can be a breeze to work with. As your app grows, however, state may need to change dynamically as plus and more features are added. With Recoil there is no need for a global state object(unlike Context API). So a Recoil app can end up with a lot of state “floating” around. Keeping track of this can be difficult so our goal was to make the React/Recoil app state tree, no matter how large or small, a peu easier for the developer to navigate.
我们发现，使用Atoms和Selectors轻而易举。 但是，随着您的应用程序的增长，状态可能需要随着plus和添加更多功能而动态更改。 使用Recoil，不需要全局状态对象(与Context API不同)。 因此，Recoil应用程序最终可能会处于许多“浮动”状态。 跟踪这些信息可能很困难，因此我们的目标是使React / Recoil应用程序状态树(无论大小)都易于开发人员浏览。
Below you can see the relationship of all atoms, selectors, and components, and you can tell right away how the data is flowing.
在下面，您可以看到所有原子，选择器和组件的关系，并且可以立即告诉数据如何流动。
A sample to-do list app, with selectors, components and their relationships. 一个待办事项清单应用程序示例，其中包含选择器，组件及其关系。From left to right you can visualize your atoms, selectors, and components respectively.
从左到右，您可以分别显示原子，选择器和组件。
Having a visualization of the data flow can be beneficial as your app grows. What if you want to see all of your components laid out nicely? Reactime 5 can do that for you.
随着应用程序的增长，可视化数据流可能会有所帮助。 如果您希望看到所有组件的布局都很好怎么办？ Reactime 5可以为您做到这一点。
Collapsible component state tree 可折叠组件状态树Although Recoil is still in the experimental stage, its future looks very promising as the library itself is “React-ish”(similar to hooks) and seems to be a natural fit for the existing React environment.
尽管Recoil仍处于试验阶段，但由于库本身是“ React-ish”(类似于钩子)，并且它似乎很适合现有React环境，因此它的未来看起来很有希望。
We’re excited to announce that Reactime 5 now supports Recoil which means that you can:
我们很高兴地宣布Reactime 5现在支持Recoil，这意味着您可以：
See how the state changes in your Recoil.js application 查看状态在Recoil.js应用程序中如何变化 Observe the history tree of component rendering 观察组件渲染的历史树 Keep track of the component render times via a stunning bubble chart visualization 通过出色的气泡图可视化记录组件渲染时间We’re really excited about Reactime 5 and we’d love for you to check it out and provide critical feedback. Click to download the Reactime Chrome Extension.
我们对Reactime 5感到非常兴奋，非常希望您能够检查出它并提供重要反馈。 单击以下载Reactime Chrome扩展程序 。
Any improvements you’d like to make? We continually review pull requests, please ensure tests are included. Make a PR here.
您想进行任何改进吗？ 我们会不断审查请求请求，请确保包含测试。 在这里进行公关。
Did you know that we have three publications and a YouTube channel? Find links to everything at plainenglish.io!
您知道我们有三个出版物和一个YouTube频道吗？ 在plainenglish.io上找到所有内容的链接！
翻译自: https://medium.com/javascript-in-plain-english/recoil-js-debugging-in-action-with-reactime-5-0-77f79910dc43
反冲物料
相关资源：继电器的反冲电压的限制