多平台统一管理软件接口,如何实现多平台统一管理软件接口
348
2023-02-07
react 创建单例组件的方法
需求背景
最近有个需求,需要在项目中添加一个消息通知弹窗,告知用户一些信息。
用户看过消息后,就不再弹窗了。
问题
很明显,这个需要后端的介入,提供相应的接口(这样可扩展性更好)。
在开发过程中,遇到个问题:由于我们的系统是多页面的,所以每次切换页面,都会去请求后端的消息接口。。有一定的性能损耗。
因为是多页面系统,使用单例组件貌似也没啥意义(不过是个机会学习学习单例组件是怎么写的)。
于是,想到使用浏览器缓存来记录是否弹过窗了(当然,得设定过期时间)。
如何写单例组件
1、工具函数:
import ReactDOM from 'react-dom';
/**
* ReactDOM 不推荐直接向 document.body mount 元素
* 当 node 不存在时,创建一个 div
*/
function domRender(reactElem, node) {
let div;
if (node) {
div = typeof node === 'string'
? window.document.getElementById(node)
: node;
} else {
div = window.document.createElement('div');
window.document.body.appendChild(div);
}
return ReactDOM.render(reactElem, div);
}
2、组件:
export class SingletonLoading extends Component {
globalLoadingCount = 0;
pageLoadingCount = 0;
state = {
show: false,
className: '',
isGlobal: undefined
}
delayTimer = null;
start = (options = {}) => {
// ...
}
stop = (options = {}) => {
// ...
}
stopAll() {
if (!this.state.show) return;
this.globalLoadingCount = 0;
this.pageLoadingCount = 0;
this.setState({show: false});
}
get isGlobalLoading() {
return this.state.isGlobal && this.state.show;
}
get noWaiting() {
return this.noGlobalWhttp://aiting && this.pageLoadingCount < 1;
}
get toPageLoading() {
return this.noGlobalWaiting && this.isGlobalLoading;
}
get noGlobalWaiting() {
return this.globalLoadingCount < 1;
}
render() {
return
}
}
// 使用上面的工具函数
export const loading = domRender(
3、使用组件:
import loading from 'xxx';
// ...
loading.start();
loading.stop();
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~