The rapid rise of ReactJS was a result of its simplicity combined with its performance benefits. The rendering efficiencies from the virtual DOM, reusable components, and intuitive learning process brought many developers to choose React.

ReactJS的快速崛起是其简单性和性能优势的结果。 虚拟DOM的渲染效率，可重用的组件以及直观的学习过程使许多开发人员选择React。

However, the lack of intuitive and effective solutions when it comes to React state management has been a recurring problem and this led to the rise of Facebook’s new state management library, Recoil.

但是，在React状态管理方面缺乏直观有效的解决方案一直是一个反复出现的问题，这导致了Facebook新的状态管理库Recoil的兴起。

First, let’s get a fundamental understanding of some of the issues with current methods of state management.

首先，让我们对当前状态管理方法中的一些问题有一个基本的了解。

那么国家管理图书馆怎么了？ (So What’s Wrong with State Management Libraries?)

Libraries such as Redux came to popularity in order to address the issues associated with prop drilling and unnecessary re-renders across shared state throughout an application’s component tree.

为了解决与应用程序钻探和整个应用程序组件树中共享状态之间不必要的重新渲染有关的问题，诸如Redux之类的库开始流行。

Redux creates a centralized store and does an effective job in solving these core issues, however, this comes with its own problems:

Redux创建了一个集中式商店，并在解决这些核心问题方面做得很有效，但是，这也有其自身的问题：

• Steep learning curve: In order to effectively implement Redux, developers need to get familiarized with concepts and terms including selectors, reducers, actions, mapStateToProps, and much more.

  陡峭的学习曲线：为了有效地实现Redux，开发人员需要熟悉概念和术语，包括选择器，化简器，操作，mapStateToProps等。

• Restructuring business logic: Introducing Redux requires a centralized store and taking the business logic away from React components to actions and reducers, which contradicts React’s component based approach.

  重组业务逻辑： Redux的引入需要一个集中存储，并将业务逻辑从React组件转移到动作和简化器，这与React基于组件的方法相矛盾。

• Too much boilerplate: The file structure and flow complexity throughout a Redux app can be intimidating and difficult for React developers to learn.

  样板太多：整个Redux应用程序的文件结构和流程复杂性可能令人生畏，而且React开发人员很难学习。

• No Concurrent Mode support: React is soon releasing Concurrent Mode and Redux currently does not have support for this.

  不支持并发模式： React即将发布并发模式，并且Redux当前不支持此模式。

Learn more about issues with Redux here

在此处 了解有关Redux问题的更多信息

Many of these problems associated with Redux and other state management libraries have led to a demand for a more intuitive method of state management that is both scalable and more React-ish.

与Redux和其他状态管理库相关的许多这些问题导致了对状态管理更直观的方法的需求，该方法既具有可伸缩性，又具有更多的React性。

Facebook then came out to address some of these issues with Context API.

然后，Facebook出来使用Context API解决其中一些问题。

Want to read this story later? Save it in Journal.

想稍后再读这个故事吗？ 将其保存在 Journal中 。

但是，Context API有什么问题？ (But What’s Wrong with the Context API?)

Context API is a component structure provided by React to solve the problem of prop drilling. Context API allows us to make state global and share across components eliminating the need to prop drill.

Context API是React提供的用于解决道具钻探问题的组件结构。 Context API使我们能够使状态成为全局状态并在各个组件之间共享，从而无需进行深入钻探。

However, Context API is only good for low-frequency updates, and has several other limitations and problems:

但是，Context API仅适用于低频更新，并且还有其他一些局限性和问题：

• Less Performant: The way context is set up leads to unnecessary and unpredictable re-renders. Every time the React Context Provider gets a new value, all the components that consume that value are re-rendered even when the component is just interacting with part of the state.

  表现欠佳：上下文的设置方式会导致不必要的和不可预测的重新渲染。 每当React Context Provider获得一个新值时，所有消耗该值的组件都将重新呈现，即使该组件仅与状态的一部分进行交互也是如此。

• Context Hell: Even though Context API has virtually no boilerplate in comparison to Redux, adding Context Providers makes for messy and unreadable code and this makes for a very frustrating workspace.

  Context Hell：尽管与Redux相比，Context API实际上没有样板，但是添加Context Providers会使代码混乱且难以阅读，这使工作空间非常令人沮丧。

Learn more about Context API and its issues here

在此处 了解有关Context API及其问题的更多信息

那么接下来呢？ (So What Comes Next?)

The complications of Redux and the performance issues with Context API lead to the need for a solution that is far simpler with the benefits of state management libraries such as Redux. Facebook came up with the start of a solution in an experimental library, called Recoil — which addresses many of these issues.

Redux的复杂性以及Context API的性能问题导致需要一种解决方案，而该解决方案要利用状态管理库(如Redux)的好处简单得多。 Facebook在名为Recoil的实验库中提出了解决方案的开始，该库解决了许多此类问题。

什么是后座力？ (What is Recoil?)

Recoil is Facebook’s new experimental state management library that directly addresses the problems above, being able to write code in a React-ish way without having to sacrifice performance and scalability. With constant updates and dev tools similar to Redux, Recoil is in the early stages, but is certainly making a push. First, let’s understand some of the fundamentals and benefits Recoil.

Recoil是Facebook的新实验状态管理库，可直接解决上述问题，能够以React-ish方式编写代码，而不必牺牲性能和可伸缩性。 凭借不断的更新和类似于Redux的开发工具，Recoil处于早期阶段，但肯定会取得进展。 首先，让我们了解Recoil的一些基本原理和优势。

最小样板 (Minimal Boilerplate)

Getting started with recoil is as simple as wrapping the parent component in <RecoilRoot>. By doing so, you then have the ability to create as many independent global states as you would want.

反冲入门就像将父组件包装在<RecoilRoot>中一样简单。 这样，您便可以创建所需的尽可能多的独立全局状态。

易学的React式方法 (Easy to Learn React-ish Approach)

Recoil state management looks and feels just like using React Hooks. For example, the useRecoilState hook subscribes a component to the given state.

反冲状态管理的外观和感觉就像使用React Hooks一样。 例如，useRecoilState挂钩将组件预订到给定状态。

List of Recoil Hooks:

反冲钩清单：

• useRecoilState()
  useRecoilState()
• useRecoilValue()
  useRecoilValue()
• useSetRecoilState()
  useSetRecoilState()
• useResetRecoilState()
  useResetRecoilState()
• useRecoilCallback()
  useRecoilCallback()

Learn more about Recoil Hooks here

在这里了解更多关于后坐钩的信息

性能提升 (Improved Performance)

Being able to directly subscribe components to atoms and selectors leads to a large performance upgrade. You can imagine the atoms and selectors floating in a 3rd dimension above the component tree. This avoids re-renders between states that are not shared.

能够直接向原子和选择器订阅组件会导致性能大幅提升。 您可以想象漂浮在组件树上方第3维的原子和选择器。 这样可以避免在未共享的状态之间重新渲染。

动态创建状态 (Dynamically Created State)

Contrary to the Context API, Recoil allows you to create dynamic global state without sacrificing performance.

与Context API相反，Recoil允许您在不牺牲性能的情况下创建动态全局状态。

并发模式支持 (Concurrent Mode Support)

Unlike other libraries, React is built using React state under the hood. Recoil is not usable outside of React, however, works incredibly well inside of React. It will be compatible with Concurrent Mode which is a powerful new set of features that will help optimize the responsiveness of React applications.

与其他库不同，React是在后台使用React状态构建的。 反冲无法在React外部使用，但是在React内的工作异常出色。 它将与并发模式兼容，并发模式是一组强大的新功能，将有助于优化React应用程序的响应能力。

Learn more about Concurrent Mode here

在此处了解有关并发模式的更多信息

类似于Redux的开发工具进行调试(重新启动) (Redux-like Dev Tools for Debugging (Recoilize))

The surging open source community has led to the development of dev tools similar to the Redux dev tool.

蓬勃发展的开源社区促成了类似于Redux开发工具的开发工具的开发。

Check out the Recoilize dev tool here:

在此处 查看Recoilize开发工具 ：

结论 (Conclusion)

Recoil is a new experimental library and there are many unknowns. However, the open source community is promising and the typical issues developers have towards state management today are approached in a direct manner. This gives Recoil an auspicious start to a budding library that is sure to garner interest in the near future.

Recoil是一个新的实验库，有许多未知数。 但是，开源社区是有希望的，并且可以直接解决当今开发人员在状态管理方面遇到的典型问题。 这为Recoil开辟了一个崭新的图书馆的吉祥开端，该图书馆肯定会在不久的将来引起人们的兴趣。

Check out this video to learn more about Recoil and get started!

观看此视频以了解有关Recoil的更多信息并开始使用！

???? Save this story in Journal.

story将这个故事保存在Journal中 。

????‍???? Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

every‍????每个星期天早晨，您都可以在收件箱中等待本周最值得关注的Tech故事。 阅读Tech Newsletter中的“值得注意” 。