記錄--組件閱後即焚？掛載即卸載！看完你就理解了

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

前言

上家公司有個需求是批量導出學生的二維碼，我一想這簡單啊，不就是先批量獲取學生數據，然後根據QRcode生成二維碼，然後在用html2canvas導出成圖片嘛。 由於公司工具庫有現成的生成壓縮包方法，我只需要獲得對應的圖片blob就可以了，非常的easy啊。

開始動手

思路沒啥問題，但第一步就犯了難，用過react框架或者其他MVVM框架的都知道，這種類型的框架都是數據驅動視圖，也就是說一般情況下，必須先獲得數據，然後根據數據才能得到視圖。

但是問題是，html2canvas也是必須需要獲取真實dom的快照然後轉換成canvas對象。

聽著好像不衝突，誒，我先獲取數據，然後渲染出視圖，在依次通過html2canvas來生成圖片不就完事了嘛！但是想歸想，卻不能這麼做。

原因主要有兩個，一個原因呢是交互邏輯上就行不太通，也不友好。你不能“啪”點一下導出按鈕，然後獲取數據之後再去等所有數據渲染出對應組件之後，再去延遲處理導出邏輯。（耗時太長）

另一個原因呢，主要是跟html2canvas這個工具庫有關係了，它的原理簡單來說呢，就是複製你期望獲取截圖的那個dom的渲染樹，然後根據這個渲染樹在當前頁面生成一個你看不見的canvas dom對象來。那麼問題來了，因為是批量下載，所以肯定會有大量的數據，那麼如果不做處理，就會有大量的canvas對象存在當前頁面。

而canvas標簽是會占用記憶體的，那麼當同時存在過多的canvas時，就會出現一個問題，頁面卡頓甚至崩潰。所以，這是第二個原因。

那麼這篇文章主要是解決第一個原因所帶來的問題的。

編程！啟動！

第一步

那麼先簡單的隨便生成一個組件好了，因為是公司源碼嘛，大家懂的都懂。

interface IProps {
  qrCode: string
  studentName: string
  className: string
}

const SaveQRCode = (props: IProps) => {
  const divRef = React.useRef<HTMLDivElement>(null)
  // 具體怎麼渲染看你們需求了
  return (
    <div ref={divRef}>XXXXXX</div>  
  )
}

看到代碼，用過html2canvas的小伙伴應該知道ref是幹嘛用的了，html2canvas()這個方法的參數是HTMLElement，傳統一點的辦法呢，可以通過document.getXXXXX這個方法來獲取真實的dom元素。那麼Ref就是替代前者的，它可以直接通過react框架獲取真實的dom元素。

第二步

那麼最簡單的組件我們已經寫好了，接下來就是如何動態的掛載這個組件，並且在掛載完之後就立刻卸載它。

那麼先來理一下思路： 1、動態地掛載這個組件，且不能被用戶肉眼觀察到 2、掛載動作執行完立刻執行html2canvas獲取canvas對象 3、通過canvas對象轉換成blob對象並返回，或者直接通過回調函數返回canvas對象 4、組件卸載，清空dom樹

那麼根據上面幾點，可以得出：從外部獲取的肯定是有組件這個東西，而掛載的位置則有要求，但並不一定需要從外部獲取。

為了不被樣式影響，我們直接在body標簽下，再掛載一個div標簽，來進行組件的動態渲染和卸載，同時也避免了影響之前dom樹的結構。

思路就說到這了，接下來直接拋出代碼：

const AsyncMountComponent = (
  getElement: (onUnmount: () => void) => ReactNode,
  container: HTMLElement,
) => {
  const root = createRoot(container)
  const element = getElement(() => {
    root.unmount()
    container.remove()
  })
  root.render(<Suspense fallback={null}>{element}</Suspense>)
}

這裡我因為想做的更加通用一點，所以把根節點讓外部進行處理，如果希望更加業務一點，比如當前這個場景必然不會讓用戶可見，可以直接改成

const AsyncMountComponent = (getElement: (onUnmount: () => void) => ReactNode) => {
  const div = document.createElement('div')
  div.style.position = 'absolute'
  div.style.left = '2000px'
  document.body.appendChild(div)
  const root = createRoot(div)
  const element = getElement(() => {
    root.unmount()
    container.remove()
  })
  root.render(<Suspense fallback={null}>{element}</Suspense>)
}

這裡的隱藏方式看個人喜好，無所謂。但有一點要註意的是，一定要可見，不然的話html2canvas生成不了圖片，這裡是最簡單粗暴的方式，直接偏移left。

第三步

那麼地基打好了，我們該怎麼用這兩個東西呢

interface IProps {
  qrCode: string
  studentName: string
  className: string
  // 這裡自然就是獲取blob和canvas對象的地方了
  onConfirm?: (data: { canvas: HTMLCanvasElement, blob: Blob }) => void
  // 這裡是卸載的地方，由外部決定何時卸載節點，更加自由
  onUnmount?: () => void
}

const SaveQRCode = (props: IProps) => {
  const divRef = React.useRef<HTMLDivElement>(null)
  useEffect(() => {
    if (divRef.current && props.onConfirm) {
      html2canvas(divRef.current).then((canvas) => {
        canvas.toBlob((blob) => {
          props.onConfirm!({canvas, blob: blob!})
          props.onUnmount!()
        })
      })
    }
  }, [])
  // 具體怎麼渲染看你們需求了
  return (
    <div ref={divRef}>XXXXXX</div>  
  )
}

首先我們對組件進行修改，因為我的方案是第一種，沒有太業務向，所以說一些業務邏輯必然是要到組件層面去處理的，所以添加兩個參數，一個獲取blob和canvas對象，另一個用來卸載節點。

至於useEffect就很容易理解了，掛載後用html2canvas處理組件頂層div獲取截圖，然後返回數據，並卸載節點。

組件改造完畢了，那我們接下來把這兩個組合一下

const getQRCodeBlobCanvas = async (props: IProps): Promise<{
  canvas: HTMLCanvasElement, blob: Blob
}> => {
  return new Promise((resolve) => {
    const div = document.createElement('div')
    div.style.position = 'absolute'
    div.style.left = '2000px'
    document.body.appendChild(div)
    asyncMountComponent(
      (dispose) => (<SaveQRCode {...props} onConfirm={resolve} onUnmount={dispose}/>),
      div
    )
  })
}

那麼一個簡單的動態閱後即焚組件就完成了，且可以直接通過方法的形式使用，完美適配批量導出功能，當然也包括單個導出，至於批量導出的細節我就不寫了，非常的簡單。

升級V2

我只提供了最通用一種方式來做這麼個閱後即焚組件，之後我閑著無聊，又把它做了一次業務向升級，獲得了V2版本

這個版本呢，你只需要傳入一個組件進去，且不用關心何時卸載，它是最真實的閱後即焚。至於數據，會通過Promise的方式返回給用戶。

const Wrapper = ({callback, children}: {  
  callback: (data: { blob: Blob,canvas: HTMLCanvasElement }) => void,  
  children: ReactNode  
}) => {  
  const divRef = useRef<HTMLDivElement>(null)  
  useEffect(() => {  
    if (divRef.current) {  
      html2canvas(divRef.current).then((canvas) => {  
        canvas.toBlob((blob) => {  
          callback({canvas, blob: blob!})  
        })  
      })  
    }  
  }, [])  
  return <div ref={divRef}>  
    {children}  
  </div>
}  
  
const getComponentSnapshotBlobCanvas = (getElement: () => ReactNode): Promise<{canvas:HTMLCanvasElement, blob: Blob}> => {
  return new Promise((resolve) => {
    const div = document.createElement('div')
    div.style.position = 'absolute'
    div.style.left = '2000px'
    document.body.appendChild(div)
    const root = createRoot(div)
    root.render((
      <Wrapper
        callback={(values) => {
          root.unmount()
          div.remove()
          resolve(values)
        }}
      >
        {getElement()}
      </Wrapper>
    ))
  })
}

本文轉載於:

https://juejin.cn/post/7278512641781334051

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。