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 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue项目实战总结篇
Feb 11 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 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实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
2018/12/05 Javascript
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
vue设置导航栏、侧边栏为公共页面的例子
2019/11/01 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
django js实现部分页面刷新的示例代码
2018/05/28 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python判断变量是否为列表的方法
2020/09/17 Python
Pandas的数据过滤实现
2021/01/15 Python
捷克时尚网上商店:OTTO
2018/03/15 全球购物
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
房屋质量投诉书
2015/07/02 职场文书
技术入股协议书
2016/03/22 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python