load-state
平常项目中经常碰到需要有加载中状态的管理，比如表单提交，一般是这样写的
import React from "react";
import "antd/dist/antd.css";
import { Spin, Button } from "antd";
class Demo extends React.Component {
state = { loading: false };
submit = async data => {
this.setState({ loading: true });
try {
let res = await fetch("xxx.com", data);
this.setState({ loading: false });
alert("成功了");
} catch (e) {
this.setState({ loading: false });
}
};
render() {
return (
<Spin spinning={this.state.loading}>
<Button onClick={this.submit}>提交</Button>
</Spin>
);
}
}这样写很多时候会感觉比较繁琐，而且很多人大多数都不写异常处理，可能出现异常的时候加载中效果无法消除，导致用户无法操作，也很容易忘记再某些情况分支下关闭加载中效果
使用load-state这个小东西就可以这样写啦
import React from "react";
import "antd/dist/antd.css";
import { Spin, Button } from "antd";
import loadState from "load-state";
class Demo extends React.Component {
state = { loading: false };
loading = loadState.createRFn("loading");
submit = async data => {
let res = await this.loading(fetch("xxx.com", data));
alert("成功了");
};
render() {
return (
<Spin spinning={!!this.state.loading}>
<Button onClick={this.submit}>提交</Button>
</Spin>
);
}
}是不是清爽很多，不用自己去管理loading状态，不会忘记去关闭loading状态，如果有需要异常处理和平常一样的操作，不影响
还有一个问题就是有时候一个loading状态，多个地方同时使用（改变值），很容易出现混乱，load-state是使用一个数字来管理加载状态的，
多个地方同时使用一个状态也不会有问题，
注意看这里<Spin spinning={!!this.state.loading}> 使用了 !! 来转换类型
当然想更优雅的使用可以参考下方React Hook的实现，使用可以不转换类型
loadState.createFn(changeLoadFn)
创建一个加载方法
参数
changeLoadFn function(change) 状态变更方法，change为1或-1, 可通过loadState.getNextState方法获取下一个状态值
返回值
返回一个加载方法function(promise),
- promise可以是一个
Promise对象或返回Promise对象的方法 -
0.1版本以上promise可以是boolean值，true loading 计数+1 , false -1（这样使用需要自己管理好状态，不然可能会导致一些异常） - 执行此方法，方法会将管理的状态值+1，promise对象成功或出现异常时会将状态值-1
loadState.getNextState(cur, change)
获取下一个状态值
参数
- cur: 当前状态值
- change: 修改值 1 或 -1
loadState.createFn参数方法中接受到的参数
返回值
如果cur为boolean类型或为空则认为0，再继续加上change
loadState.createRFn(field) React组件内使用封装
参数
field state中的状态名称
返回值
返回一个加载方法
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Spin, Alert, Button } from "antd";
import loadState from "load-state";
class Card extends React.Component {
state = { data: { loading: false } };
loading = loadState.createRFn("data.loading");
showSetTimeout = async ms => {
const pm = new Promise((resolve, reject) => {
setTimeout(() => resolve(123), ms);
});
// 可以接受到异步返回值
const result = await this.loading(pm);
console.log(result);
// 和上面代码一样 用await舒服很多
// this.loading(pm).then(res => {
// console.log(res); // 123
// });
// 参数也可以是一个返回promise的方法
// const result = this.loading(async () => {
// return await fetch("/aa/bb");
// });
};
render() {
return (
<div>
<Spin spinning={!!this.state.data.loading}>
<Alert
message="点击按钮进入loading状态"
description="可多次点击."
type="info"
/>
</Spin>
<div style={{ marginTop: 16 }}>
Loading state: {this.state.data.loading} -{" "}
{(!!this.state.data.loading).toString()}
<Button
style={{ margin: 16 }}
type="primary"
onClick={() => this.showSetTimeout(1000)}
>
1000ms
</Button>
<Button type="primary" onClick={() => this.showSetTimeout(2000)}>
2000ms
</Button>
</div>
</div>
);
}
}
演示地址：codesandbox
react hook封装示例
hook用起来更爽
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Spin, Alert, Button } from "antd";
import loadState from "load-state";
/**
* react hook 示例
*/
/**
* loading状态管理hook
* @param initValue 可空， 初始值， 可以为boolean值或int
* @param isNum 是否返回数字形式的加载状态， 默认为false, 返回boolean形式的状态
* @return {[当前loading状态值, 状态管理方法]}
*/
function useLoading(initValue, isNum = false) {
const [loading, setLoading] = useState(initValue);
return [
isNum ? loading : !!loading,
loadState.createFn(change => {
setLoading(prev => loadState.getNextState(prev, change));
})
];
}
function Demo() {
// 获取loading 状态 和 loading状态管理方法
const [loading, loadingFn] = useLoading(false, true);
const showSetTimeout = async ms => {
const pm = new Promise((resolve, reject) => {
setTimeout(() => resolve(123), ms);
});
// 可以接受到异步返回值
const result = await loadingFn(pm);
console.log(result);
};
return (
<div>
<Spin spinning={!!loading}>
<Alert
message="点击按钮进入loading状态"
description="可多次点击."
type="info"
/>
</Spin>
<div style={{ marginTop: 16 }}>
Loading state: {loading} - {(!!loading).toString()}
<Button
style={{ margin: 16 }}
type="primary"
onClick={() => showSetTimeout(1000)}
>
1000ms
</Button>
<Button type="primary" onClick={() => showSetTimeout(2000)}>
2000ms
</Button>
</div>
</div>
);
}
演示地址：codesandbox
loadState.createVFn(field) Vue组件内使用封装
参数
field data中的状态名称
返回值
返回一个加载方法
<template>
<div>
<el-alert v-loading="!!data.loading" title="点击按钮进入loading状态" type="success" description="可多次点击"></el-alert>
<p>{{data.loading}}-{{!!data.loading}}</p>
<el-button type="primary" @click="showSetTimeout(1000)">1000ms</el-button>
<el-button type="primary" @click="showSetTimeout(2000)">2000ms</el-button>
</div>
</template>
<script>
import loadState from "load-state";
export default {
data() {
return {
tableData: [],
data: {
loading: false
}
};
},
methods: {
loadingFn: loadState.createVFn("data.loading"),
showSetTimeout: async function(ms) {
const pm = new Promise((resolve, reject) => {
setTimeout(() => resolve(123), ms);
});
// 可以接受到异步返回值
const result = await this.loadingFn(pm);
console.log(result);
// 和上面代码一样 用await舒服很多
// this.loading(pm).then(res => {
// console.log(res); // 123
// });
// 参数也可以是一个返回promise的方法
// const result = this.loading(async () => {
// return await fetch("/aa/bb");
// });
}
}
};
</script>
演示地址：codesandbox
