9、recoil库的基本使用

93 阅读 0 评论 62 点赞

我是靠谱客的博主飘逸音响，这篇文章主要介绍9、recoil库的基本使用，现在分享给大家，希望可以做个参考。

基础概念

复制代码

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

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

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

1.配置

安装

复制代码

1
2
npm install recoil

app.js全局配置

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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文件，存放需要管理的全局状态

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;