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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions