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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
告诉大家什么是JSON
Jun 10 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
js实现单元格拖拽效果
Feb 10 Javascript
vue中使用vue-pdf的方法详解
Sep 05 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
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
jquery 中ajax执行的优先级
2015/06/22 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
JavaScript中CreateTextFile函数
2020/08/30 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
浅谈python写入大量文件的问题
2018/11/09 Python
python接口自动化(十七)--Json 数据处理---一次爬坑记(详解)
2019/04/18 Python
Python动态语言与鸭子类型详解
2019/07/01 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
django配置app中的静态文件步骤
2020/03/27 Python
通过Python实现一个简单的html页面
2020/05/16 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
电大毕业生自我鉴定
2014/04/10 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
六五普法宣传标语
2014/10/06 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis