Comment créer un composant singleton en utilisant React

Cette fois, je vais vous montrer comment utiliser React pour créer un composant singleton. Quelles sont les précautions pour utiliser React pour créer un composant singleton. Voici un cas pratique, jetons un 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'occasion 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 :

Comment utiliser le filtre dans vue

Comment utiliser vue pour déterminer la classe de dom

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!