react 實作單例元件（附程式碼）

這次帶給大家react 實作單例元件（附程式碼），react 實作單例元件的注意事項有哪些，下面就是實戰案例，一起來看一下。

需求背景

最近有個需求，需要在專案中加入訊息通知彈窗，告知使用者一些資訊。

用戶看過訊息後，就不再彈窗了。

問題

很明顯，這個需要後端的介入，提供對應的介面（這樣可擴展性更好）。

在開發過程中，遇到個問題：由於我們的系統是多頁面的，所以每次切換頁面，都會去請求後端的訊息介面。 。有一定的性能損耗。

因為是多頁面系統，使用單例元件看起來也沒啥意義（不過是個機會學習學習單例元件是怎麼寫的）。
於是，想到使用瀏覽器快取來記錄是否彈過窗了（當然，得設定過期時間）。

如何寫單例元件

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、使用元件：

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

開發react專案步驟詳解

#如何取得前端介面中的DOM元素絕對位置

以上是react 實作單例元件（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！