React implémente le composant singleton (avec code)

Cette fois, je vais vous expliquer comment implémenter un composant singleton dans React (avec du code). Quelles sont les précautions pour implémenter un composant singleton dans React ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Contexte de l'exigence

Récemment, il est nécessaire d'ajouter une fenêtre contextuelle de notification de message au projet pour informer l'utilisateur de certaines informations.

Une fois que l'utilisateur a lu le message, la fenêtre contextuelle n'apparaîtra plus.

Problème

Évidemment, cela nécessite l'intervention du backend pour fournir les interfaces correspondantes (donc la scalabilité est meilleure).

Pendant le processus de développement, nous avons rencontré un problème : étant donné que notre système est multipage, chaque fois que nous changeons de page, nous demanderons l'interface de message back-end. . Il y a une certaine perte de performances.

Comme il s'agit d'un système multipage, il semble inutile d'utiliser des composants singleton (mais c'est l'opportunité d'apprendre à écrire des composants singleton).
J'ai donc pensé à utiliser le cache du navigateur pour enregistrer si la fenêtre pop-up s'est affichée (bien sûr, le délai d'expiration doit être défini).

Comment écrire un composant singleton

1. Fonction outil :

import ReactDOM from 'react-dom';
/**
 * ReactDOM 不推荐直接向 document.body mount 元素
 * 当 node 不存在时，创建一个 p
 */
function domRender(reactElem, node) {
 let p;
 if (node) {
  p = typeof node === 'string'
   ? window.document.getElementById(node)
   : node;
 } else {
  p = window.document.createElement('p');
  window.document.body.appendChild(p);
 }
 return ReactDOM.render(reactElem, p);
}

2. > 3. Utiliser des composants :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

import loading from 'xxx';
// ...
loading.start();
loading.stop();

Lecture recommandée :

Explication détaillée des étapes pour développer un projet React

Comment obtenir la position absolue de l'élément DOM dans l'interface front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!