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

Posted 2023-02-21

技术标签:

【中文标题】React Hooks - 从 DOM 中临时删除组件而不卸载它的最佳方法【英文标题】：React Hooks - Best way to remove an component temporarily from DOM without unmounting it 【发布时间】：2020-12-03 08:34:57 【问题描述】：

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

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

【问题讨论】：

【参考方案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

【讨论】：

以上是关于React Hooks - 从 DOM 中临时删除组件而不卸载它的最佳方法的主要内容，如果未能解决你的问题，请参考以下文章

react hooks 中的 useEffect, useCallback, useMemo

react自定义hooks-自动改变页面的title，Http请求hooks等..（持续更新）