写点什么

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:253280

评论

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

轻量级数据中台,大中型企业数字化转型首选

RestCloud

数据中台

typhonjs-escomplex 代码可读性 & 可维护度探索

南城FE

JavaScript 前端开发 代码质量 代码规范

概念回顾: API 和 API 互联

NGINX开源社区

API 协议 API 类型 API 策略 API 架构 API使用现状

以终为始,依托度量指标,多种工具全面提升研发效能

之家技术

工具 团队 效能 AIGC 释产能

多行业用户齐聚,2023 IoTDB 用户大会详细议程更新!

Apache IoTDB

数据库操作入门:PyMongo 和 MongoDB 的基本用法

小万哥

Python 程序员 软件 后端 开发

高效使用 PyMongo 进行 MongoDB 查询和插入操作

小万哥

Python 程序员 软件 后端 开发

10w+播放!自动化办公,用到了哪些实用的Python技术?

程序员晚枫

Python 编程 自动化办公

企业APP软件定制开发的关键步骤

Geek_16d138

软件开发 app定制开发

OpenHarmony开发者论坛正式上线,盖楼赢惊喜好礼~

OpenHarmony开发者

OpenHarmony

释产能,论研效提升之路

之家技术

效率 团队 资源 效能 释产能

低代码平台是什么?具备哪些特性?

树上有只程序猿

低代码

市场行情回暖、利好月来袭,Web3 广告业领头羊 Verasity 或迎爆发

鳄鱼视界

选人与育人,孰先孰后?

凌晞

团队管理

Milvus 上新!全新 Range Search 功能,可精准控制搜索结果

Zilliz

Milvus Zilliz 向量数据库

文心一言 VS 讯飞星火 VS chatgpt (135)-- 算法导论11.3 1题

福大大架构师每日一题

福大大架构师每日一题

一文带你了解TypeScript 函数

Aion

typescript Vue 前端

浅谈研发数字化在汽车之家的落地实践

之家技术

产品 数字化 研发 效能 释产能

Databend 与海外某电信签约:共创海外电信数据仓库新纪元

Databend

推动OpenHarmony在AIDC行业落地,优博讯的技术积累与实践

极客天地

Kyligence 入选 Gartner® 2023 客户之声报告,高分获评“卓越表现者”

Kyligence

数据分析 指标平台

使用AWS CodePipeline自动部署项目到EC2

wangkx

亚马逊云 亚马逊云科技 EC2 CodePipeline CodeDeploy

go-mongox:简单高效,让文档操作和 bson 数据构造更流畅

陈明勇

Go golang mongodb 开源 go mongo

inBuilder低代码平台新特性推荐-第七期

inBuilder低代码平台

低代码

Redis分布式锁问题分析与处理方案

郑在暴富中

redis redisson 分布式锁

零代码秒集成打通小鹅通订单支付信息与CRM合同接口

RestCloud

零代码 APPlink

玩转 Cgroup 系列之三:挑战手动管理 Cgroup

小猿姐

cpu 资源管理 Cgroup

GitHub Universe 2023:AI 技术引领软件开发创新浪潮

SEAL安全

GitHub AI 企业号11月PK榜

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