写点什么

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

评论

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

线程池的引入和实践案例分享

小诚信驿站

线程池 线程池工作原理

推荐18个 Vue常用组件库

程序员海军

Vue 组件库

区块链国富论——财富不是物,而是全球信用共识

CECBC

黄金交易

和面试官简单聊聊 Elasticsearch

escray

elasticsearch elastic 4月日更 技术编辑能力考核

声网 Agora 初体验

若尘

声网 Agora

Prometheus官方文档Querying[三]function

卓丁

我一怒之下写了个抄袭举报工具!只因一觉醒来我的文章被多个平台抄袭!

1_bit

Python selenium 签约计划 文本分析 文章查重

干货版“测试小品”欢乐场景

清菡软件测试

自动化测试

一文带你了解如何排查内存泄漏导致的页面卡顿现象

零一

chrome 大前端 浏览器 内存泄露 问题处理

Java检查异常、非检查异常、运行时异常、非运行时异常的区别

Sakura

4月日更

面向小白使用Git 的手册

程序员海军

git

阿里P8架构师分享私用Java学习资料(含视频和项目源码以及面试题)

北游学Java

Java 数据库 分布式 微服务

100万级车辆数据监控的hadoop大数据架构探索与实践

程序员潘Sir

大数据 flink hadoop 分布式 车联网

uni-app跨端开发H5、小程序、IOS、Android(八):理解uni-app生命周期

程序员潘Sir

小程序 uni-app ios android H5

聪明人的训练(十一)

Changing Lin

4月日更

移动端混合开发选型方案分析

花花

移动开发 移动端 签约计划

ffmpeg完美实现解封装操作!

txp

音视频

Linux rm 命令

一个大红包

4月日更

JavaScript 中的执行上下文和执行栈 的理解

程序员海军

JavaScript 大前端 上下文 执行栈

如何从零搭建技术团队

石云升

团队建设 28天写作 职场经验 管理经验 4月日更

【音视频】手把手带你实现超实用实时音视频工具

轻口味

android 音视频 WebRTC 移动端 OpenGL ES

【签约计划】调查采访能力考核成绩公布

InfoQ写作社区官方

签约计划 热门活动

自己挖的坑,自己填|靠谱点评

无量靠谱

园区网的网关部署在接入层还是汇聚层 面试官与求职者之间谈话

艺博东

网关 交换机 网络配置

如何高效率的工作

程序员海军

工作效率 提升效率

从零开始带你打开批处理大门

xiezhr

doc 批处理 cmd

一篇文章带你彻底了解MySQL各种约束

若尘

MySQL 数据库 约束 4月日更

机器学习水水笔记之——世界是积木吗?

Nydia

签约计划

从运营、产品和技术,多角度思考电商的营销体系建设

邴越

电商营销 优惠券

自古彭城列九州 龙争虎斗几千秋|靠谱点评

无量靠谱

这些相见恨晚的命令行工具,你用过几个?

wangkx

bash Linux Tool

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