search

IVLIU / react-offscreen

react offscreen component like vue keep-alive
MIT License
107 stars 8 forks source link

如果是需要跨组件的需要缓存的话不就没用了 #2

Closed xypisces closed 9 months ago

xypisces commented 9 months ago

A,B两个页面组件的话，在A页面里有个缓存组件，切换到B页面组件，A页面卸载了，里面的缓存组件不也就卸载了。 本质只是在原地做了display:none？

IVLIU commented 9 months ago

A,B两个页面组件的话，在A页面里有个缓存组件，切换到B页面组件，A页面卸载了，里面的缓存组件不也就卸载了。 本质只是在原地做了display:none？

  1. 离屏的作用域是子组件，而非全局，因此A页面的离屏组件，切换到B页面自然就卸载了
  2. 相较于display:none还是存在一定区别的，区别一，离屏组件初次加载前是不会渲染的，即对应的dom不会生成；区别二，离屏组件隐藏即display为none时是不会参与diff的，且对应的effect回调也不会执行 希望可以解决你的疑惑 @xypisces
IVLIU commented 9 months ago

image 其fiber结构如此

xypisces commented 9 months ago

那假如想要实现父组件卸载后子组件还能存活，有啥好方案吗，目前看到的是把子组件在卸载的时候，渲染到顶层上，重新渲染时再去判断，不过好像渲染流程有点问题，effect有些不触发

IVLIU commented 9 months ago

那假如想要实现父组件卸载后子组件还能存活，有啥好方案吗，目前看到的是把子组件在卸载的时候，渲染到顶层上，重新渲染时再去判断，不过好像渲染流程有点问题，effect有些不触发

建议可以子组件始终在top level渲染，然后通过dom移动的方式将dom移动至对应的父组件内

xypisces commented 9 months ago

有没有意向支持下这个功能，或者写几个实现demo看看，我写了几个都不太行。。