React Hooks - 从 DOM 中临时删除组件而不卸载它的最佳方法

Question

我目前正在结合使用 React.memo HOC 和 display: none 来最大程度地减少对渲染的性能影响。

我想知道是否有一种对性能影响较小的方法，因为我可以在屏幕上的这种不可见状态下拥有多个组件。

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
}