React Hooks - 從 DOM 中臨時刪除組件而不卸載它的最佳方法

Question

我目前正在結合使用React.memo HOC 和display: none以盡量減少對渲染的性能影響。

我想知道是否有一種對性能影響較小的方法，因為我可以在屏幕上這個不可見的 state 上有多個組件。

Answer 1

嘗試這個

el.hide = () => {
    el.storeInnerHTML = el.innerHTML //create property
    el.innerHTML = '' //done
}
el.show = () => {
    if((el.storeInnerHTML ?? true) === true) return 
    el.innerHTML = el.storeInnerHTML
    delete el.storeInnerHTML
}