9、recoil库的基本使用

基础概念

使用 Recoil 会为你创建一个数据流向图，从 atom（共享状态）到 selector（纯函数），再流向 React 组件。Atom 是组件可以订阅的 state 单位。selector 可以同步或异步改变此 state。

官方文档：https://www.recoiljs.cn/docs/introduction/installation

下面来看一下基础使用把。

1.配置

安装

npm install recoil

app.js全局配置

import React, { Component } from "react";
import { ConfigProvider } from 'antd';
import { withRouter } from "react-router-dom";
import { RecoilRoot } from 'recoil';
import Routes from "./router";
class App extends Component {constructor(props) {super(props);this.state = {isAuthenticated: false,isAuthenticating: true};}render() {const childProps = {isAuthenticated: this.state.isAuthenticated,userHasAuthenticated: this.userHasAuthenticated};return (<ConfigProvider><RecoilRoot><React.Suspense fallback={<div>加载中……</div>}><Routes childProps={childProps} /></React.Suspense></RecoilRoot></ConfigProvider>);}
}
export default withRouter(App);

2.基本使用

创建record.js文件，存放需要管理的全局状态


import {atom,selector,
} from 'recoil';const TEXT_STATE = atom({key: 'textState',default: '',
});
const TEXT_STATE_COMPUTED = selector({key: 'textStateChangeValue',/*** 1.若get内进行的是异步请求，则需要把promise对象返回出去* 2.报错处理:throw ... 抛出错误* 3.带参数查询:selector --> selectorFamily*/    get: ({ get }) => {const text = get(TEXT_STATE);return new Promise((resolve, reject) => {resolve(text.length)})},// get: async ({ get }) => {//     const text = get(TEXT_STATE);//     const response = await new Promise((resolve, reject) => {//         resolve(text.length)//     })//     return response// },
})export default { TEXT_STATE, TEXT_STATE_COMPUTED };
export {TEXT_STATE,TEXT_STATE_COMPUTED
}

创建两个测试文件，测试功能是否完整复现
test1.js

import React from "react";
import "./tese1.css";
import { TEXT_STATE,TEXT_STATE_COMPUTED } from "../../recoil/index";import { useRecoilState, useRecoilValue } from "recoil";
import { Button } from 'antd';
function Test1(props) {const [text, setText] = useRecoilState(TEXT_STATE);const length = useRecoilValue(TEXT_STATE_COMPUTED)const onChange = (event) => {setText(event.target.value);};return (<div><input type="text" value={text} onChange={onChange} /><br />输入值: {text}<br />输入值的长度: {length}<br /><Button type="primary" onClick={() => props.history.push('/test')}/></div>);
}export default Test1;

test2.js

import React from "react";
import "./tese1.css";
import { TEXT_STATE } from "../../recoil/index";import { useRecoilValue } from "recoil";function Test2() {const text = useRecoilValue(TEXT_STATE);return (<div><input type="text" defaultValue={text} /><br />Echo: {text}</div>);
}export default Test2;

9、recoil库的基本使用相关推荐

Windows API参考大全
第一章 Win32 API概论 1.1为什么使用 Wu32 API 在Windows程序设计领域处于发展初期时,Windows程序员可使用的编程工具唯有API 函数.这些函数在程序员手中犹如" ...
Recoil 是 React 的状态管理库
Recoil 是 React 的状态管理库,因此你需要将 Recoil 安装到 React 项目中才能使用.创建 React 项目最方便且推荐的方式是使用 Create React App: npx ...
react 哲学_细聊Concent amp; Recoil , 探索react数据流的新开发模式
开源不易,感谢你的支持,❤ star me if you like concent ^_^ 序言之前发表了一篇文章 redux.mobx.concent特性大比拼, 看后生如何对局前辈,吸引了不少感 ...
写在2021: 值得关注/学习的前端框架和工具库
前言最近在知乎看到了这么个问题:学完Vue还有必要学习React和Node吗?[1], 有很奇妙的感觉,因为我在最开始入门前端时,也是以Vue入的门,在"学完"Vue之后, 我也 ...
Recoil是React新的“Redux”吗？
Recoil 是一个新的 React 状态管理库,它允许您以 Reactish 的方式管理全局/可共享状态.Recoil是由 Facebook 团队开发的.在这篇博客中,我们将看看 useRecoil ...
快速入门 Pinia 状态管理库
Pinia 是一个用于 Vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划.如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发. Pinia的优点 1.完整的 ...
React 下一代数据流 hox vs Recoil 使用对比分析
Facebook 最近内部释出一个状态管理库Recoil.心里着实吓了一跳,笔者花费了一段时间的实践选定了hox,并且完成了一套纯函数组件.纯hook.按钮级权限.微前端开发架子:X-neuron/a ...
react常用ui组件库
前端常用组件库移动端和pc端适配:react+chakre-ui组件库+recoil状态管理+react-router-dom+typescript https://chakra-ui.com/do ...
一文带你全面体验八种状态管理库
动手点关注干货不迷路写在前面状态管理库伴随着数据驱动类框架诞生以来,一直都是个带争议的话题,社区里关于这个方向的讨论文章也是数不胜数,本文写作的目的并不是去详细解答每一款状态库的设计原理和最佳实 ...
2022 年值得推荐的 React 库
此文为译文,原文出自: 原作者:Amitav Mishra 原文链接:React Libraries for 2022[2] 译者:LBJ React 出现已经有一定的时间了.从那时起,围绕组件驱动的 ...

9、recoil库的基本使用

基础概念

官方文档：https://www.recoiljs.cn/docs/introduction/installation

1.配置

2.基本使用

9、recoil库的基本使用相关推荐

最新文章

热门文章