Explication détaillée des étapes pour créer un composant singleton dans React

Cette fois, je vais vous donner une explication détaillée des étapes pour créer un composant singleton dans React. Quelles sont les précautions pour créer un composant singleton dans React. Voici un cas pratique, prenons un. regarder.

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 de la méthode de traitement du projet Vue compilé et déployé dans le répertoire racine non-site Web

longueur et size() dans jQuery Quelles sont les différences d'utilisation

Analyse de l'utilisation des appels en chaîne dans le modèle de conception JS

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!