react 动态组件加载器

Posted 2021-01-24 zhaozhipeng

在进行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的删除与添加，会对性能造成一定的影响。