react 创建单例组件的方法


Posted in Javascript onApril 26, 2018

需求背景

最近有个需求,需要在项目中添加一个消息通知弹窗,告知用户一些信息。

用户看过消息后,就不再弹窗了。

问题

很明显,这个需要后端的介入,提供相应的接口(这样可扩展性更好)。

在开发过程中,遇到个问题:由于我们的系统是多页面的,所以每次切换页面,都会去请求后端的消息接口。。有一定的性能损耗。

因为是多页面系统,使用单例组件貌似也没啥意义(不过是个机会学习学习单例组件是怎么写的)。
于是,想到使用浏览器缓存来记录是否弹过窗了(当然,得设定过期时间)。

如何写单例组件

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.noGlobalWaiting && this.pageLoadingCount < 1;
 }

 get toPageLoading() {
  return this.noGlobalWaiting && this.isGlobalLoading;
 }

 get noGlobalWaiting() {
  return this.globalLoadingCount < 1;
 }

 render() {
  return <BreakLoading {...this.state} />;
 }
}

// 使用上面的工具函数
export const loading = domRender(<SingletonLoading />);

3、使用组件:

import loading from 'xxx';

// ...
loading.start();
loading.stop();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
Dec 09 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
webpack css加载和图片加载的方法示例
Sep 11 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
JSON 入门教程基础篇 json入门学习笔记
Sep 22 Javascript
js制作提示框插件
Dec 24 Javascript
node打造微信个人号机器人的方法示例
Apr 26 #Javascript
Vue 使用中的小技巧
Apr 26 #Javascript
基于Vue实现拖拽功能
Jul 29 #Javascript
vuex操作state对象的实例代码
Apr 25 #Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 #Javascript
你点的 ES6一些小技巧,请查收
Apr 25 #Javascript
vue 组件使用中的一些细节点
Apr 25 #Javascript
You might like
什么是MVC,好东西啊
2007/05/03 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
Javascript点击按钮随机改变数字与其颜色
2016/09/01 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
python+mysql实现简单的web程序
2014/09/11 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python之用户输入的实例
2018/06/22 Python
在python plt图表中文字大小调节的方法
2019/07/08 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
python读取xml文件方法解析
2020/08/04 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
美国折扣地毯销售网站:Rugs.com
2020/03/27 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
捐书倡议书
2014/08/29 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
工程承包协议书范本
2014/09/29 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
奔腾年代观后感
2015/06/09 职场文书
2015中学学校工作总结
2015/07/20 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
python程序的组织结构详解
2021/12/06 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers