search

IVLIU / react-offscreen

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

从未显示状态改为显示状态，antd4 会有很大问题，会多出来一些动画。最终排查到可能是 rc-motion 导致。 #9

Open 1021683053 opened 6 months ago

1021683053 commented 6 months ago

https://codesandbox.io/p/sandbox/serverless-voice-gmjhw6

Untitled

1021683053 commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 https://github.com/IVLIU/react-offscreen/issues/5 这个 issue 大概率是一个问题。

IVLIU commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

是同一个问题，但这个问题不是Activity可以解决调的

1021683053 commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

是同一个问题，但这个问题不是Activity可以解决调的

React原生的 Activity 没有这个问题, 可以查看具体原因，如果是 html 未隐藏才导致有这个动画，那也有办法处理。 还有一点这种处理方式跟原生有很大差异的一点就是 useEffect 不会执行，这个可以通过修改React useEffect是否可以实现。

ifmos commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

是同一个问题，但这个问题不是Activity可以解决调的

React原生的 Activity 没有这个问题, 可以查看具体原因，如果是 html 未隐藏才导致有这个动画，那也有办法处理。 还有一点这种处理方式跟原生有很大差异的一点就是 useEffect 不会执行，这个可以通过修改React useEffect是否可以实现。

大佬后面怎么处理的哇

1021683053 commented 6 months ago

还有一点这种处理方式跟原生有很大差异的一点就是 useEffect 不会执行，这个可以通过修改React useEffect是否可以实现

没解决，暂时不用了。还用老方法了，不过老方法性能低。

IVLIU commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

是同一个问题，但这个问题不是Activity可以解决调的

React原生的 Activity 没有这个问题, 可以查看具体原因，如果是 html 未隐藏才导致有这个动画，那也有办法处理。 还有一点这种处理方式跟原生有很大差异的一点就是 useEffect 不会执行，这个可以通过修改React useEffect是否可以实现。

  1. 组件挂起时实际是通过throw promise实现的，即Suspense挂起，因此useEffect是无法实现的。 我这里有一个关于useActivated的unstable实现https://github.com/IVLIU/react-offscreen/tree/feat/unstable-hooks，不知道是否可以参考下
  2. Suspense挂起组件是通过设置display none实现的，但是不清楚为什么会引起antd的多余动画，这个我是继续研究下，我试了下antd 5+，除了popover相关组件大部分表现尚可
  3. 关于使用的话，可以在局部需要保存状态的地方使用
IVLIU commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

image

5

image

4 如果默认motionLeave为true的话，会默认走一遍动画流程，看下是否可以关闭

1021683053 commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

image 5 image 4 如果默认motionLeave为true的话，会默认走一遍动画流程，看下是否可以关闭

我昨天也看了源码，大概率不能这么搞，大概率是生命周期的问题：

那么如果不用Activity，直接用DIsplay: none 的方式会不会也有这个问题呢？显然，没有这个问题。

导致这个问题的主要原因还是生命周期，没有执行 effect 回调，以及没有执行Effect 返回函数。

这里强调一点：原生的 Activity 再每次显示隐藏会执行副作用。

佐证：事件监听再 组件卸载的时候会移除。https://github.com/react-component/motion/blob/f18d5f419952578b675c092bacac0eb376a986c5/src/hooks/useDomMotionEvents.ts#L45-L50

image

还有其他很多地方有副作用相关内容，单纯的把离开动画关闭，可能会导致意想不到的结果。

IVLIU commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

image 5 image 4 如果默认motionLeave为true的话，会默认走一遍动画流程，看下是否可以关闭

我昨天也看了源码，大概率不能这么搞，大概率是生命周期的问题：

那么如果不用Activity，直接用DIsplay: none 的方式会不会也有这个问题呢？显然，没有这个问题。

导致这个问题的主要原因还是生命周期，没有执行 effect 回调，以及没有执行Effect 返回函数。

这里强调一点：原生的 Activity 再每次显示隐藏会执行副作用。

佐证：事件监听再 组件卸载的时候会移除。https://github.com/react-component/motion/blob/f18d5f419952578b675c092bacac0eb376a986c5/src/hooks/useDomMotionEvents.ts#L45-L50

image

还有其他很多地方有副作用相关内容，单纯的把离开动画关闭，可能会导致意想不到的结果。

同意，但是在native Activity推出之前，只能拿Suspense模拟，所以在应用上建议在合适的地方使用

1021683053 commented 6 months ago

补充一下，如果是这种状态基本判定无法大规模使用，只能做局部模块缓存使用。 以 #5 这个 issue 大概率是一个问题。

image 5 image 4 如果默认motionLeave为true的话，会默认走一遍动画流程，看下是否可以关闭

我昨天也看了源码，大概率不能这么搞，大概率是生命周期的问题： 那么如果不用Activity，直接用DIsplay: none 的方式会不会也有这个问题呢？显然，没有这个问题。 导致这个问题的主要原因还是生命周期，没有执行 effect 回调，以及没有执行Effect 返回函数。 这里强调一点：原生的 Activity 再每次显示隐藏会执行副作用。 佐证：事件监听再 组件卸载的时候会移除。https://github.com/react-component/motion/blob/f18d5f419952578b675c092bacac0eb376a986c5/src/hooks/useDomMotionEvents.ts#L45-L50 image 还有其他很多地方有副作用相关内容，单纯的把离开动画关闭，可能会导致意想不到的结果。

同意，但是在native Activity推出之前，只能拿Suspense模拟，所以在应用上建议在合适的地方使用

还有种做法就是，我们重写 React的 useEffect。这个Effect 判断是否在 Activity 上下文中，如果在的话就构造一个类似于 useEffect一样的生命周期一样的东西。如果不在，就使用原有的 useEffect 不知道这样是否可行。