React는 싱글톤 컴포넌트를 구현합니다(코드 포함)

이번에는 싱글톤 컴포넌트를 구현하기 위한 React를 가져왔습니다(코드 포함). 싱글턴 컴포넌트를 구현하기 위한 React의 주의사항은 무엇인가요?

요구사항 배경

최근 사용자에게 일부 정보를 알리기 위해 프로젝트에 메시지 알림 팝업창을 추가해야 한다는 요구사항이 있습니다.

사용자가 메시지를 읽은 후에는 팝업창이 더 이상 나타나지 않습니다.

Problem

분명히 이에 상응하는 인터페이스를 제공하기 위해 백엔드의 개입이 필요합니다(그래서 확장성이 더 좋습니다).

개발 과정에서 문제가 발생했습니다. 시스템에 여러 페이지가 있으므로 페이지를 전환할 때마다 백엔드 메시지 인터페이스를 요청하게 됩니다. . 특정 성능 손실이 있습니다.

멀티 페이지 시스템이기 때문에 싱글톤 컴포넌트를 사용하는 것은 의미가 없을 것 같습니다(그러나 싱글턴 컴포넌트 작성 방법을 배울 수 있는 기회입니다).
그래서 팝업창이 떴는지 기록하기 위해 브라우저 캐시를 활용해보자는 생각이 들었습니다(물론 만료시간은 설정해야 합니다).

싱글턴 컴포넌트 작성 방법

1. 도구 기능:

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. 컴포넌트:

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

3. 이 글의 사례를 읽으신 후 방법을 익히셨을 것입니다. PHP 중국어 웹사이트의 기타 관련 기사에 더 흥미로운 내용이 있으니 관심을 가져주세요!

추천 자료:

리액트 프로젝트 개발 단계에 대한 자세한 설명

프런트 엔드 인터페이스에서 DOM 요소의 절대 위치를 얻는 방법

위 내용은 React는 싱글톤 컴포넌트를 구현합니다(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!