Recoil是ReactJS新的“Redux”吗? – josh

21-09-04 banq

Recoil 是一个新的 React 状态管理库,它允许您以 Reactish 的方式管理全局/可共享状态。很棒的是,Recoil是由 Facebook 团队开发的。在这篇博客中,我们将看看 useRecoilState 钩子,以及它们是如何使它如此“React”的?

 

让我们来看一个非常简单的问题陈述。我们希望在两个兄弟/并行子组件中共享计数状态变量。

第一个解决方案:Prop-Drilling最简单的可能解决方案是将 count 移动到一个共同的父级并通过 props 向下传递。

这解决了我们的问题,但会导致以下问题

  • 这里我们有一个简单的级别树,但是如果我们有更多级别,比如说 4 或 5 级呢?道具钻进这么多级别会使代码难以导航
  • 整个组件树将重新渲染——而不仅仅是 2 个叶子组件。
  • 父组件将被状态重载,并可能导致不必要的重新渲染。

 

第二种解决方案:Context API我们可以使用 React 的 context API。上下文提供了一种通过组件树传递数据的方法,而无需在每个级别手动传递数据。

我们需要将父组件包装在 Context.Provider 中,子组件(C1&C2)可以使用 useContext 钩子订阅它。这有助于我们避免螺旋钻。但是,使用这种方法有一些限制:

  • 需要多个上下文提供者——一个 Context.Provider 只能共享一个值,而不是一组不确定的值——每个值都有自己的消费者。
  • 复杂的单元测试用例——需要创建一个模拟提供程序来编写单元测试用例。
  • 当上下文发生变化时,我们仍然会重新渲染树中的每个组件。(这就是为什么需要 redux,即使 context 可以在没有 prop 钻取的情况下管理全局状态)

  

第三种解决方案:useRecoilState最后我将介绍 useRecoilState,我们可以通过使用原子创建可共享的订阅者状态单元来轻松实现这一点 。 为了利用 Recoil API,我们需要将父组件包装在RecoilRoot 中。

让我们看看为什么 Recoil 被称为“Reactish”和“Minimal”。

我比较 useState 和 useRecoilState 只是为了显示语法的相似程度。但是,Recoil 的功能可以与其他全局状态管理库(如 Redux、MobX、Apollo GraphQL 等)进行比较。

结论: Recoil 仍处于试验阶段,但进展很快

 

猜你喜欢