速来报名!AICon北京站鸿蒙专场~ 了解详情
写点什么

Recoil:面向 React 的新的状态管理库

  • 2020-06-02
  • 本文字数:853 字

    阅读完需:约 3 分钟

Recoil:面向React的新的状态管理库

Recoil是 Facebook 推出的一个全新的、实验性的 JavaScript 状态管理库,它解决了使用现有 Context API 在构建较大应用时所面临的很多问题。


因为 React 主要是一个 UI 库,开发人员通常会在使用 React 的同时使用一个状态管理方案以简化数据的处理。


很多现有的状态管理方案都是基于 React 在 2014 年引入的 Flux 架构的。然而,尽管像 Redux 和 MobX 这样的库能够确保应用的状态保持一致,但是对于很多应用来讲,它们所带来的开销是难以估量的。


为了解决这个问题,React 引入了一个简单的替代方案Context API,它允许开发人员通过组件树共享数据,而不必在每个级别手动传递属性。


Recoil 为开发人员提供了另外一个解决方案,这些开发人员可能想要避免使用那些已经成熟的状态管理系统,但是又觉得 Context API 太具局限性。


如官方文档所述,Recoil 通过解决 Context API 的三个问题实现了这一点。


  1. 组件状态只能通过往上推送至公共祖先来进行共享,这可能包含一个巨大的树,随后这个树需要重新渲染。

  2. Context 只能存储一个值,而不能存储一组不确定的值,让每个值都有自己的消费者。

  3. 以上两点使得将树的顶部(状态必须要存在的地方)与树的叶子(状态被使用的地方)进行代码分离变得非常困难。


Recoil 使用 Atom 和 Selector 来管理应用的数据。每个 Atom 包含一个唯一的键和一段它将要管理的数据,而每个 Selector 代表一个衍生状态,该衍生状态可以是基于多个 Atom 的。


关于如何组合这两者,有一个非常棒的样例,那就是流行的 todo 应用,它包含了两个 Atom 和一个 Selector。


为了管理应用的数据,我们创建了两个 Atom。第一个包括原始的列表项,而第二个包含了过滤器(“已完成”、“未完成”和“全部”等)。


为了展现这个 todo 列表,我们使用 Selector 基于选中的过滤器来过滤 todo 项。


关于完整的 todo 教程和良好的入门指南,请访问官方文档


Recoil 基于 MIT 许可证发布,可以通过GitHub获取。


请注意,Recoil 只是一个实验性的解决方案,还不能在生产环境的应用中使用。


原文链接:Recoil - a New State Management Library for React


2020-06-02 09:253175

评论

发布
暂无评论
发现更多内容

详解Native Memory Tracking之追踪区域分析

华为云开发者联盟

开发 内存 华为云

CQRS与Event Sourcing

胖子笑西风

架构 DDD CQRS Event Sourcing #java

SpringBoot 接口层统一加密解密

小小怪下士

Java 程序员 springboot

高频js手写题之实现数组扁平化、深拷贝、总线模式

helloworld1024fd

JavaScript

云安全系列3:如何构建云安全策略

HummerCloud

云计算 数据安全 云安全 11月月更

注意 ! !|95% 的应用程序中发现错误配置和漏洞

SEAL安全

配置管理 软件供应链安全 漏洞管理

全国独家 | 上海线下面授大规模敏捷LeSS认证 | 2022年12月8-10日

ShineScrum

less 大规模敏捷 LeSS认证 吕毅老师

阿里云架构师张先国:揭秘ECS倚天实例背后的技术

云布道师

算力 云栖大会 倚天实例

Go类型转换和类型断言可别搞混了

王中阳Go

golang 高效工作 学习方法 面试题 11月月更

GaussDB CN服务异常实例分析

华为云开发者联盟

数据库 华为云 GaussDB

腾讯二面vue面试题总结

bb_xiaxia1998

Vue

记一场vue面试

bb_xiaxia1998

Vue

面试官:请实现Javascript发布-订阅模式

helloworld1024fd

JavaScript

Kata3.0.0 x LifseaOS x 龙蜥内核三管齐下!带你体验最新的安全容器之旅

OpenAnolis小助手

容器 云原生 内核 龙蜥社区 袋鼠RunD

前端面试被问到的js手写面试题汇总

helloworld1024fd

JavaScript

「Go易错集锦」如何正确设置枚举中的零值

Go学堂

golang 程序员 个人成长 枚举 11月月更

react源码中的协调与调度

flyzz177

React

vue为什么v-for的优先级比v-if的高?

bb_xiaxia1998

Vue

PGL图学习之图神经网络GNN模型GCN、GAT[系列六]

汀丶人工智能

图神经网络 11月月更

Fiori Elements 应用进行二次开发的一个具体案例分享

汪子熙

SAP Fiori ui5 Web应用 11月月更

《全国一体化政务大数据体系建设指南》发布,隐私计算将如何发挥作用?

洞见科技

浅谈深度学习中的概率

华为云开发者联盟

人工智能 华为云

阿里Redis最全面试全攻略,读完这个就可以和阿里面试官好好聊聊

钟奕礼

Java java程序员 java面试 java编程

掌握这些前端手写面试题能进大厂吗

helloworld1024fd

JavaScript

【专项测试系列】-缓存击穿、穿透、雪崩专项测试

京东科技开发者

缓存 测试 缓存穿透 缓存击穿 缓存雪崩

谈谈前端应用里图标(Icon)的渲染和内容提取方式

汪子熙

前端开发 SAP ui5 Web应用 11月月更

《关键信息基础设施安全保护要求》于明年五月正式实施

行云管家

网络安全

DDD与应用架构

胖子笑西风

架构 DDD 框架 整洁架构 Java core

年搜索量超7亿次背后:这款APP用火山引擎 DataTester 完成“数据驱动”

字节跳动数据平台

大数据 数据分析 A/B测试

react源码中的hooks

flyzz177

React

react源码中的fiber架构

flyzz177

React

Recoil:面向React的新的状态管理库_大前端_Guy Nesher_InfoQ精选文章