반응에서 싱글톤 구성 요소를 생성하는 단계에 대한 자세한 설명

이번에는 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 />);

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

추천 자료:

웹사이트가 아닌 루트 디렉터리에 컴파일 및 배포된 Vue 프로젝트를 처리하는 방법에 대한 자세한 설명

jQuery에서 길이와 크기() 사용의 차이점은 무엇입니까

분석 JS 디자인 모드에서 체인콜 사용에 대해

위 내용은 반응에서 싱글톤 구성 요소를 생성하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!