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 相关文章推荐
取选中的radio的值
Jan 11 Javascript
无阻塞加载脚本分析[全]
Jan 20 Javascript
jQuery学习笔记 更改jQuery对象
Sep 19 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 Javascript
使用Vue实现简单计算器
Feb 25 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开发的一些注意点总结
2010/10/12 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
10个php函数实用却不常见
2015/10/13 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
JQuery选择器特辑 详细小结
2012/05/14 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
js库Modernizr的介绍和使用
2015/05/07 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
微信小程序 实现点击添加移除class
2017/06/12 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
2018/09/03 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
浅谈vue加载优化策略
2019/03/19 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
机器学习10大经典算法详解
2017/12/07 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python3 log10()函数简单用法
2019/02/19 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
What's the difference between an interface and abstract class? (接口与抽象类有什么区别)
2012/10/29 面试题
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
2014年党支部承诺书
2014/05/30 职场文书
公务员培的训心得体会
2014/09/01 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
公司员工宿舍管理制度
2015/08/03 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python
Win11如何默认打开软件界面最大化?Win11默认打开软件界面最大化的方法
2022/07/15 数码科技