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下异步提交表单 异步跨域提交表单
Nov 17 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
Javascript获取当前日期的农历日期代码
Oct 08 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS实现向表格行添加新单元格的方法
Mar 30 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
jQuery特殊符号转义的实现
Nov 30 Javascript
Javascript基础回顾之(二) js作用域
Jan 31 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
Apr 20 Javascript
vue-swiper的使用教程
Aug 30 Javascript
vue项目中实现的微信分享功能示例
Jan 21 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 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
javascript XML数据显示为HTML一例
2008/12/23 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python常见字典内建函数用法示例
2018/05/14 Python
python实战教程之自动扫雷
2018/07/13 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
Python设计模式之职责链模式原理与用法实例分析
2019/01/11 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python zip()函数使用方法解析
2019/10/31 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
在 Python 中使用 MQTT的方法
2020/08/18 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
项目经理的岗位职责
2013/11/23 职场文书
学生会干部自荐信
2014/02/04 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
篮球社团活动总结
2014/06/27 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
经济贸易系求职信
2014/08/04 职场文书
开服装店计划书
2014/08/15 职场文书