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();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • react配合antd组件实现的管理系统示例代码
  • 详解开发react应用最好用的脚手架 create-react-app
  • React diff算法的实现示例
  • 详解react-redux插件入门
  • react redux入门示例
  • 一个基于react的图片裁剪组件示例
  • React中的render何时执行过程
  • React props和state属性的具体使用方法
  • react-native 圆弧拖动进度条实现的示例代码
  • 详解react、redux、react-redux之间的关系
赞 (0)

相关推荐

  • react配合antd组件实现的管理系统示例代码

    react配合antd组件实现的管理系统示例代码

    前言:此文需要有一定react,redux基础,具体学习资料请科学上网. 使用create-react-app脚手架 具体基础配置请参考 配合antd组件实现的管理系统demo,线上地址 开发前反思 1. 按需加载 webpack的 import 动态加载的模块的函数,import(参数),参数为模块地址. 注意: import 后会返回一个promise对象. import('/components/chart').then(mud => { dosomething(mod) }); 本dem

  • 详解开发react应用最好用的脚手架 create-react-app

    1. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧. 大家都是用webpack + es6来结合react开发前端应用. 这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境. 比如: npm install react react-dom --save npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --

  • 详解react-redux插件入门

    可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux:下面简单讲解,如何使用react-redux来开发react. 描述 这个插件可以让我们的redux代码更加的简洁和美观.我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux. 注意:如果是刚使用

  • React中的render何时执行过程

    我们都知道Render在组件实例化和存在期时都会被执行.实例化在componentWillMount执行完成后就会被执行,这个没什么好说的.在这里我们主要分析存在期组件更新时的执行. 存在期的方法包含: - componentWillReceiveProps - shouldComponentUpdate - componentWillUpdate - render - componentDidUpdate 这些方法会在组件的状态或者属性发生发生变化时被执行,如果我们使用了Redux,那么就只有

  • 一个基于react的图片裁剪组件示例

    开始 写了一年多vue,感觉碰到了点瓶颈,学习下react找找感觉.刚好最近使用vue写了个基于cropperJS的图片裁剪的组件,便花费了几个晚上的功夫用react再写一遍.代码地址 项目是使用create-react-app来开发的,省去了很多webpack配置的功夫,支持eslint,自动刷新等功能,使用前npm install并npm start即可.推荐同样是新学习react的人也用用看. 项目写的比较简陋,自定义配置比较差,不过也是完成了裁剪图片的基本功能,希望可以帮助到初学reac

  • React props和state属性的具体使用方法

    在上一节中,我们讲到了React组件,说了如何使用ES6类创建一个React组件并在其他的地方使用它.这一节我们将讲到React组件的两大灵魂--props和state. props 不知道大家还记不记得xml标签中的属性,就像这样: <class id="1"> <student id="1">John Kindem</student> <student id="2">Alick Ice</

  • react-native 圆弧拖动进度条实现的示例代码

    react-native 圆弧拖动进度条实现的示例代码

    本文介绍了react-native 圆弧拖动进度条实现的示例代码,分享给大家,具体如下: 先上效果图 因为需求需要实现这个效果图 非原生实现, 难点1:绘制 使用svg 难点2:点击事件的处理 难点3:封装 由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块 render() { return ( <View pointerEvents={'box-only'} //事件处理 {...this._panResponder.panHandlers}> //实际圆环 {

  • react redux入门示例

    环境准备 为了方便,这里使用create-react-app搭建react环境 create-react-app mydemo 弹出配置 如果需要自定义react的配置,需要运行下面的命令把配置文件弹出来. npm run eject 安装redux npm i redux --save 简单理解 redux简单用法就是通过它的store来订阅和发布信息. 通过subscribe来订阅action,通过dispatch来触发action.reducer中定义来各个action要做的事情. dem

  • 详解react、redux、react-redux之间的关系

    本文介绍了react.redux.react-redux之间的关系,分享给大家,也给自己留个笔记,具体如下: React 一些小型项目,只使用 React 完全够用了,数据管理使用props.state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --> B,但随着业务复杂度的增加,有可能是这样的:A --> B --> C --> D --> E,E需要的数据需要从A那里通过props传递过来,以及对应的 E

  • React diff算法的实现示例

    前言 在上一篇文章,我们已经实现了React的组件功能,从功能的角度来说已经实现了React的核心功能了. 但是我们的实现方式有很大的问题:每次更新都重新渲染整个应用或者整个组件,DOM操作十分昂贵,这样性能损耗非常大. 为了减少DOM更新,我们需要找渲染前后真正变化的部分,只更新这一部分DOM.而对比变化,找出需要更新部分的算法我们称之为diff算法. 对比策略 在前面两篇文章后,我们实现了一个render方法,它能将虚拟DOM渲染成真正的DOM,我们现在就需要改进它,让它不要再傻乎乎地重新渲

随机推荐