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库的基本使用的全部内容，希望文章能够帮你解决9、recoil库的基本使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。