react 创建单例组件的方法
时间:2019-04-14
本文章向大家介绍react 创建单例组件的方法,主要包括react 创建单例组件的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
需求背景
最近有个需求,需要在项目中添加一个消息通知弹窗,告知用户一些信息。
用户看过消息后,就不再弹窗了。
问题
很明显,这个需要后端的介入,提供相应的接口(这样可扩展性更好)。
在开发过程中,遇到个问题:由于我们的系统是多页面的,所以每次切换页面,都会去请求后端的消息接口。。有一定的性能损耗。
因为是多页面系统,使用单例组件貌似也没啥意义(不过是个机会学习学习单例组件是怎么写的)。
于是,想到使用浏览器缓存来记录是否弹过窗了(当然,得设定过期时间)。
如何写单例组件
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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- css重写checkbox样式
- 通过shell脚本同时监控多个数据库负载(r5笔记第14天)
- Java 定时器 Timer 的使用.
- 通过shell脚本来统计段大小(r5笔记第14天)
- Linux下配置MySQL主从复制(r5笔记第13天)
- Final 关键字
- ArrayList 和 LinkedList的执行效率比较
- 关于consistent gets(r5笔记第12天)
- wait/notify 实现多线程交叉备份
- 01.SVN介绍与安装
- 由sqlplus中的一个小细节所做的折腾(r5笔记第11天)
- 浅析多线程的对象锁和Class锁
- 使用strace诊断奇怪的sqlplus登录问题(r5笔记第29天)
- 读书笔记 之《Thinking in Java》(对象、集合、异常)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用 Spring Cloud 实现微服务系统
- Java assert关键字
- Java 线程的六种状态
- Mysql 必知必会(一)
- Spring boot 整合dynamic实现多数据源
- Integer 值判断相等
- JDK 8 新特性 之 Strams简单使用
- BindingException: Parameter 'XXX' not found. Available parameters are [collection, list]
- Android StartService()源码分析(一)
- JDK 8 新特性 之 default关键字
- 设计模式 之 单例模式
- SpringBoot 配置多数据源
- git pull 报错:The following untracked working tree files would be overwritten by merge
- Docker 使用Dockerfile构建Docker(三)
- Docker-compose 安装与基本使用(四)