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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
Table冻结表头示例代码
Aug 20 Javascript
纯js写的分页表格数据为json串
Feb 18 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
javaScript实现一个队列的方法
Jul 14 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去除数组中重复数据
2014/11/18 PHP
JQuery 操作select标签实现代码
2010/05/14 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
2016/12/27 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
使用python为mysql实现restful接口
2018/01/05 Python
pandas数据处理基础之筛选指定行或者指定列的数据
2018/05/03 Python
Python实现的逻辑回归算法示例【附测试csv文件下载】
2018/12/28 Python
python Tkinter版学生管理系统
2019/02/20 Python
python实现AES加密和解密
2019/03/27 Python
django admin组件使用方法详解
2019/07/19 Python
用Python配平化学方程式的方法
2019/07/20 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
jupyter notebook实现显示行号
2020/04/13 Python
python属于解释型语言么
2020/06/15 Python
python字典key不能是可以是啥类型
2020/08/04 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
骨干教师考核方案
2014/05/09 职场文书
销售员态度差检讨书
2014/10/26 职场文书
爱的教育观后感
2015/06/17 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
redis 查看所有的key方式
2021/05/07 Redis
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android