Maison > interface Web > js tutoriel > Explication détaillée des étapes pour créer un composant singleton dans React

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

php中世界最好的语言
Libérer: 2018-05-15 11:48:36
original
1716 Les gens l'ont consulté

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);
}
Copier après la connexion

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 />);
Copier après la connexion

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 &#39;xxx&#39;;
// ...
loading.start();
loading.stop();
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal