CJY0208 / react-activation

Hack <KeepAlive /> for React
https://www.npmjs.com/package/react-activation
MIT License
1.79k stars 141 forks source link

umi的 keep-alive tabs ,项目中有详情页,不需要缓存,但是需要详情页的tab,可以怎么处理下比较方便 #252

Closed zhouyan1992 closed 1 year ago

CJY0208 commented 1 year ago

tab 功能和 keep-alive 其实可以看做两个独立功能

tab 是切换标签,keep-alive 只是标签对应的容器是否具有缓存功能

如果你们的 tabs 实现能明确区分出 tab 标签与容器,那你的需求主要就是关掉详情页容器的缓存功能

也就是:详情页容器中不使用 <KeepAlive>

这个需求其实和 react-activation 是无关的,取决于你们的业务代码如何写

zhouyan1992 commented 1 year ago

tab 功能和 keep-alive 其实可以看做两个独立功能

tab 是切换标签,keep-alive 只是标签对应的容器是否具有缓存功能

如果你们的 tabs 实现能明确区分出 tab 标签与容器,那你的需求主要就是关掉详情页容器的缓存功能

也就是:详情页容器中不使用 <KeepAlive>

这个需求其实和 react-activation 是无关的,取决于你们的业务代码如何写

嗯嗯,目前tab是根据getCachingNodes里面所有的node生成的,如果要把没有标签的tab融合进来,比较麻烦,就想问一下,有没有简单的属性,可以关闭页面的缓存功能,这样的话tabbar的代码可以不用改变,比较简单一点

CJY0208 commented 1 year ago
import { KeepAlive } from 'react-activation'

function Tab({ keep = true, children }) {
  return <KeepAlive when={keep}>{children}</KeepAlive>
}

或者

import { KeepAlive } from 'react-activation'

function Tab({ keep = true, children }) {
  const Wrapper = keep ? KeepAlive : React.Fragment

  return <Wrapper>{children}</Wrapper>
}