react method to create singleton components

Requirement background

Recently, there is a requirement that you need to add a message notification pop-up window to the project to inform users of some information.

After the user has read the message, he no longer pops up.

question

It is obvious that this requires the intervention of the backend and provides corresponding interfaces (this is more scalable).

During the development process, we encountered a problem: since our system has multiple pages, every time we switch pages, we will request the backend message interface. . There are certain performance losses.

Because it is a multi-page system, it seems that using singleton components is meaningless (it is just an opportunity to learn how to write singleton components).
So, I thought of using browser cache to record whether the window has popped up (of course, I have to set the expiration time).

How to write a singleton component

1. Tool functions:

import ReactDOM from 'react-dom';

/**
  * ReactDOM does not recommend direct mount elements
  * Create a div when node does not exist
  */
function domRender(reactElem, node) {
 let div;
 if (node) {
  div = typeof node === 'string'
   ? (node)
   : node;
 } else {
  div = ('div');
  (div);
 }
 return (reactElem, div);
}

2. Components:

export class SingletonLoading extends Component {
 globalLoadingCount = 0;
 pageLoadingCount = 0;

 state = {
  show: false,
  className: '',
  isGlobal: undefined
 }

 delayTimer = null;

 start = (options = {}) => {
  // ...
 }

 stop = (options = {}) => {
  // ...
 }

 stopAll() {
  if (!) return;
   = 0;
   = 0;
  ({show: false});
 }

 get isGlobalLoading() {
  return  && ;
 }

 get noWaiting() {
  return  &&  < 1;
 }

 get toPageLoading() {
  return  && ;
 }

 get noGlobalWaiting() {
  return  < 1;
 }

 render() {
  return <BreakLoading {...} />;
 }
}

// Use the above tool functionexport const loading = domRender(<SingletonLoading />);

3. Use components:

import loading from 'xxx';

// ...
();
();

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.