React實現單例組件

問題背景

在工作中遇到了這樣一個場景，寫了個通用的彈窗組件，卻在同一個頁面中多次使用了該組件。當點擊打開彈窗時，可想而知，一次性打開了多個彈窗，而業務需求只需要打開一個。

我個人在解決問題過程中的一些已廢棄思路

我首先想到的是能不能像mobx的@observer一樣用一個譬如@singleton來修飾組件類，然后在像正常組件一樣在使用組件的地方使用標簽名來使用該組件。google了大半小時，發現行不通，因為每在render方法里使用一個組件，React就會自動實例化一個組件類，所以React本身的設計其實完全不適用於單例

解決問題的核心思路

1. 采用類似調用方法的形式而非組件標簽的形式來調用組件
2. 只能在一個特定的容器內render組件，從而保證單例

代碼

import React from 'react'
import { render, unmountComponentAtNode } from 'react-dom'
//具體單例類代碼
export default class Singleton {
  constructor(component){
    this.dom = null;
    this.component = component;
    this.instance = null;
  }

  render(option) {
    if(!this.dom) {
      this.dom = document.createElement('div');
      document.body.appendChild(this.dom);
    }
    this.instance = ReactDOM.render(<this.component {...option}/>, this.dom);
  }

  destroy() {
    unmountComponentAtNode(this.dom);
  }
}

//使用例子
//在適當地方調用如下代碼渲染組件
new Singleton(Component).show();