Home > Web Front-end > JS Tutorial > body text

React implements singleton component (with code)

php中世界最好的语言
Release: 2018-06-06 09:39:21
Original
1958 people have browsed it

This time I will bring you how to implement a singleton component in react (with code). What are the precautions for implementing a singleton component in react? The following is a practical case, let's take a look.

Requirement Background

Recently there was a requirement to add a message notification pop-up window to the project to inform the user of some information.

After the user reads the message, the pop-up window will no longer appear.

Problem

Obviously, this requires the intervention of the backend to provide the corresponding interface (so that the scalability is better).

During the development process, we encountered a problem: Since our system is multi-page, every time we switch pages, we will request the back-end message interface. . There is a certain performance loss.

Because it is a multi-page system, there seems to be no point in using singleton components (but it is an opportunity to learn how to write singleton components).
So, I thought of using the browser cache to record whether the pop-up window has popped up (of course, the expiration time must be set).

How to write a singleton component

1. Tool function:

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);
}
Copy after login

2. Component:

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 />);
Copy after login

3. Using components :

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to develop a react project

How to obtain the absolute position of the DOM element in the front-end interface

The above is the detailed content of React implements singleton component (with code). For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!