Recoil的简单实践和思考

最新推荐文章于 2024-08-21 10:00:16 发布
最新推荐文章于 2024-08-21 10:00:16 发布
阅读量795 收藏 2
点赞数
文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pfourfire/article/details/125239095
版权
本文探讨了在React项目中使用Recoil作为全局状态管理工具的原因和优势，包括其简洁的语法和与Hooks的无缝配合。作者通过一个简单的用户信息获取和更新的案例，展示了如何定义Atom和Selector，以及如何在组件中使用它们实现异步数据加载。Recoil的易用性和与Facebook的关联使其成为中小型项目的一个理想选择。
摘要由CSDN通过智能技术生成

Recoil的简单实践和思考

背景

随着react18的发布，和react官方新文档正在逐步完善。有兴趣的小伙伴可以去react新文档的仓库issues里面查找有关于class组件的提问和回答。

其中有一条提问是：“所以，类组件会被废除吗？”。

官方回答的大意是：“未来的react新文档全面以hooks为主，至于类组件很有可能会变成一个独立的包来维护”。

（详细问答在github.com/reactjs/rea…）

很明显，就是hooks的时代正式官宣。

动机

最近项目中全部使用函数组件+hooks，有一个常见的问题，想要管理一些全局状态，想找一个完美与hooks相对应的状态管理库。redux繁琐的写法个人看来与函数组件显得格格不入，集中式管理略显笨重。市面上太多各种剖析redux各种原理的热点文章，其实倒不是刻意与众不同，也不是独辟蹊径。每个人每个项目都有适合的状态管理工具。在项目技术选型中，不是人云亦云，而是自己了解项目特点，调研相关的利害关系，最后找到最适合自己项目的工具。因为吧，写出代码交付是为了赚钱；写，也得尽可能要求自己用优雅的代码赚钱~这对于自己的和公司是一种双赢的关系。血赚不亏。

我当时目的有三个：

最低0.47元/天 解锁文章
姑老爷呀
关注
[译]-100行代码从零实现 Facebook 的 Recoil 库
网络篝火
10-02 530
来源：Rewriting Facebook’s “Recoil” React library from scratch in 100 lines 译者：塔希 协议：CC BY-NC-SA 4.0 Atoms Recoil 是围绕着 “atoms” 这个概念构建的。Atoms 是组成整个状态中的原子性的一部分，你可以在组件中订阅它或更改它的值。 开始，我将创建一个叫做 Atom 的类 ，用来包裹一些值 T 。我加了一些辅助方法 update 和 snapshot 允许你获得或更改 Atom 的值。.
react-recoil-hooks-testing-library:简单而完整的React钩子测试实用程序，可鼓励良好的测试实践……使用Recoil！
05-02
React线圈挂钩测试库 简单而完整的React钩子测试实用程序，可鼓励良好的测试实践……使用Recoil！ 使用的api并添加<RecoilRoot>组件作为包装器，并通过将新的states数组传递给options对象来切换现有的状态默认值。 例子 // count.ts export const countState = atom ( { key : 'count' , default : 0 , } ) ; export const useRecoilCounter = ( initialProps : string ) => { const [ count , setCount ] = useRecoilState ( countState ) ; const increment = ( ) => { setCount ( count => count
Recoil在React中完整实践方案
莫幽悠
05-12 1041
先让我吐槽一下，Recoil这个玩意文档是真的不友好，另外发现国内很少有人去用Recoil，然后好多文章都是照搬官网文档，我特喵的要是出了问题直接看官方不就行了。如果你碰巧看到这个文章了，就细心看完吧，绝对的干货。至于它的一些优点特性，自己找找别的对比文章吧，我这里仅仅进行一个简单的示例演示及学习。第一步：创建项目利用vite创建一个React项目，其他的一样，别问我为啥只讲vite，因为我就是用的vite。
**Recoil开源项目实战指南**
最新发布
gitblog_00330的博客
08-21 237
Recoil开源项目实战指南 RecoilRecoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with th...
recoil
Jinrong
11-16 221
RecoilRoot 组件使用 Recoil 状态之前需要在它的外面包裹一层 RecoilRoot 组件。可以直接短平快地放在根组件外面： import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( <RecoilRoot> <C
Recoil初探
aminwangaa的博客
10-12 393
第一步 引入Recoil // 在App.tsx文件中 使用RecoilRoot包裹页面内容 import { RecoilRoot } from 'recoil' <RecoilRoot> <Provider {...stores}> <Layout> <Suspense fallback={<Loading></Loading>}> <Router> <
Recoil_ToDo:使用Recoil和React:atom_symbol:创建的Todo应用程序
03-18
:unicorn:使用Recoil和React创建的ToDo应用程序
recoil-clone:少于100行的Recoil克隆（不包括评论，示例和测试）
03-08
总结，"recoil-clone" 是一个用 TypeScript 编写的轻量级 Recoil 克隆项目，代码量控制在100行以内，目的是为了教育和展示如何在最小的代码规模下实现类似 Recoil 的状态管理功能，适用于 React 开发者学习和探索...
recoil-design-tool:使用Recoil构建的设计工具
03-20
一个简单的示例设计工具，使用Recoil和React Suspense构建。 查看。 在找到： 开始 克隆仓库 git clone git@github.com:jacques-blom/recoil-design-tool.git 选择你想要的分支 git checkout 00-useState # This is ...
recoil-devtools:具有热重载，动作重播和可自定义UI的DevTools for Recoil
05-02
Recoil开发工具 开发人员工具以启动开发工作流程或任何其他处理状态更改的体系结构（请参阅）。 请注意，此存储库正在开发中。 整合方式 是一种后坐力记录工具，可让您像在您自己的浏览器中一样重播问题。 该...
纠缠：全球状态管理工具，用于使用代理通过RecoilJS和Jotai启发React钩子
02-04
绞 全局状态管理工具，用于响应受和启发使用代理的钩子。 产品特点 无需上下文 零依赖 超轻量级： 目录 介绍 受的3D状态管理启发（状态不与虚拟dom树一起存在），我想为现代浏览器创建一个更简单，更轻量的版本（IE已死！）。 React生态系统中的当前状态管理解决方案确实可以很好地工作（mobx，redux等），但是我认为像后坐之类的库将是未来的趋势，它允许无上下文且无需重新渲染整个DOM树的粒度更新。 因此，Entangle诞生了。 纠缠这个名字来自量子纠缠，量子纠缠是两个原子相距很远的相互关联的事件，并且会相互影响。 该库是用TS编写的，并附带有类型。 该库应与支持所有浏览器（也称为
react全局状态管理_recoiljs——一个简练的React状态管理库
weixin_39520149的博客
12-21 1250
React应用开发过程中，对于状态管理有几种选择：Redux强大但是配置并不简单，而且转换到Redux的思想并不容易。React Context使用简单继承了React的思想，但是当Context过多或者需要动态添加时，显得不够简洁和有效。如果能够将部分状态从React组件树上分离出来，让分离出的状态能够一对多的映射到组件的状态上，并通过发布/订阅的方式更新组件上的状态，就能在保持Rea...
Recoil 的使用
nidongla的博客
04-09 717
健康网 https://www.9559.org/cn/ 通过简单的计数器应用来展示其使用。先来看没有 Recoil 时如何实现。 首先创建示例项目 $ yarn create react-app recoil-app --template typescript 计数器 考察如下计数器组件： Counter.tsx import React, { useState } from "react"; export const Counter = () => { const [count, ...
离不开的微服务架构，脱不开的RPC细节（值得收藏）！！！
ganjing222的博客
02-27 709
服务化有什么好处？ 服务化的一个好处就是，不限定服务的提供方使用什么技术选型，能够实现大公司跨团队的技术解耦，如下图所示： 服务A：欧洲团队维护，技术背景是Java 服务B：美洲团队维护，用C++实现 服务C：中国团队维护，技术栈是go 服务的上游调用方，按照接口、协议即可完成对远端服务的调用。 但实际上，大部分互联网公司，研发团队规模有限，大都使用同一套技术体系来实现服务： 这样的话，如果没有...
Recoil - Facebook 官方 React 状态管理器
Yvette Lau的专栏
05-18 2196
说到状态管理器，轮子满天飞。在 Class 时代，redux 与 mobx 几乎占据了全部市场，几乎没有没用过 redux 的同学。随着 Hooks 的诞生，新的一批轮子应运而生，其中有...
Recoil：构建可预测的状态管理库
why404
06-01 816
相比于其他状态管理库，Recoil采用了基于原子（Atom）和选择器（Selector）的模型，使开发人员能够以声明式的方式定义和使用状态，并自动处理状态之间的依赖关系。在过去的几年里，React社区中出现了许多状态管理库，其中Recoil凭借其独特的设计理念和强大的功能引起了广泛关注。Recoil还提供了许多其他功能，例如异步状态管理、状态快照和调试工具，以满足不同场景下的需求。在这个例子中，我们定义了一个名为doubledCount的选择器，它通过读取count状态的值并乘以2来计算派生状态的值。
Python：有限状态机实例（一）
FloatDreamed的博客
11-16 5097
# _*_ coding:utf-8 _*_ from random import randint from time import sleep __author__ = 'admin' ''' 23种设计模式之状态模式：有限状态机 下面介绍了灯的三种状态： 1.开着 2.灭着 3.坏了 其中"坏了"的状态下，若是修好了，必然进入灭着的状态...
React 下一代数据流 hox vs Recoil 使用对比分析
u012736939的博客
05-22 1999
       Facebook 最近内部释出一个状态管理库Recoil。心里着实吓了一跳，笔者花费了一段时间的实践选定了hox，并且完成了一套纯函数组件、纯hook、按钮级权限、微前端开发架子：X-neuron/antdFront 。这么看岂不是又得推翻重造，于是忍不住加了两天班，深度补脑了下。        对比之前，首先想先搞明白，那么上一代是啥：redux。由此衍
rn 中 Recoil 如何使用
02-06
要使用 Recoil，首先需要在你的 React 应用程序中安装和引入它。你可以使用 npm 或 yarn 来完成这一步： ``` npm install recoil ``` 或者 ``` yarn add recoil ``` 然后，你需要在你的 React 应用程序中引入 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值