반응을 사용하여 싱글톤 구성 요소를 만드는 방법

이번에는 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 중국어 웹사이트의 기타 관련 기사에 더 흥미로운 내용이 있으니 관심을 가져주세요!

추천 도서:

vue에서 필터를 사용하는 방법

vue를 사용하여 dom의 클래스를 결정하는 방법

위 내용은 반응을 사용하여 싱글톤 구성 요소를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!