Skip to content

多Tabs的场景下,基于DOM节点hidden的缓存方式希望支持react-activation 的方式缓存到内存里,而不是DOM层 #693

@Echonessy

Description

@Echonessy

多tab场景下,DOM层会存在两个问题
1.多个微前端渲染器mountId冲突
2.DOM层会随着tabs的增加会越来越大,实际激活的页面只有一个,导致会越来越卡

<CustomTabs {...tabsProps}/>
        {
            Object.entries(keepElements.current).map(([pathname, { children }]: any) => (
                <div
                  key={`${pathname?.toLowerCase()}:${cacheKeyMap[pathname?.toLowerCase()] || '_'}`}
                  className="runtime-keep-alive-layout"
                  style={ {
                    height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto',
                  } }
                  hidden={!matchPath(location.pathname?.toLowerCase(), pathname?.toLowerCase())}>
                    {children}
                </div>
            ))
        }
        <div hidden={isKeep} style={ { height: '100%', width: '100%', position: 'relative', overflow: 'hidden auto' } } className="runtime-keep-alive-layout-no">
            {!isKeep && element}
        </div>

希望可以将这部分hidden节点缓存到内存里

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions