在進行react專案，特別是後臺管理的專案開發中，表單、提示框等彈出元件的應用是相當廣泛的。

而這些彈框元件的狀態比如開啟、關閉以及內部顯示的內容通常都要依靠父級元件的state進行管理。

但是當在一個頁面元件中大量的使用到這些彈框的時候，對他們的狀態管理會有非常嚴重的問題，每一個彈框元件都需要相應的state狀態控制，這些狀態資訊一個一個的積累下來會造成state物件的異常臃腫，對程式碼的維護管理有很大的負面影響。

為了解決這個問題，最好不要將這些元件寫死在父級元件裡面，不用state狀態控制開啟關閉，而是在需要的時候把元件寫入頁面，不需要的時候刪除這個元件，這樣可以做到動態控制，也不需要state來進行狀態管理。下面是具體的實現程式碼。

/**
 * React動態元件載入器
 */
import * as React from 'react'
import * as ReactDOM from 'react-dom'

export default new class {

  private unmount(node: Element, removeContainer: boolean = true) {
    ReactDOM.unmountComponentAtNode(node) //刪除Node內部的元件
    if (node && removeContainer === true) {
      node.parentNode.removeChild(node) //整個刪除node
    }
  }

  mount(element: JSX.Element, node
 
?: Element) { //element是動態載入的元件, node為element要掛載在上面的dom
    let target = node
    if (!target) {
      target = document.createElement('div')
      document.body.appendChild(target)
    }
    ReactDOM.render(element, target)
    return () => {
      this.unmount(target, node === undefined)
    }
  }
}()
 

優點是可以減省state狀態控制，提高程式碼的可讀性和可維護性。

這樣還有一個優點，就是在使用彈框表單的時候可以不用在關閉表單後還要清理表單資料，因為是直接將表單這個dom從頁面中刪掉了，不必再去費心表單的資料管理。

缺點則是直接操作了dom的刪除與新增，會對效能造成一定的影響。