Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1021683053 opened this issue Apr 16, 2024 · 10 comments

Comments

@1021683053
Copy link

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

Untitled

@1021683053
Copy link
Author

1021683053 commented Apr 16, 2024

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

@IVLIU
Copy link
Owner

IVLIU commented Apr 16, 2024

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

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

@1021683053
Copy link
Author

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

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

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

@ifmos
Copy link

ifmos commented Apr 21, 2024

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

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

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

大佬后面怎么处理的哇

@1021683053
Copy link
Author

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

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

@IVLIU
Copy link
Owner

IVLIU commented Apr 24, 2024

补充一下,如果是这种状态基本判定无法大规模使用,只能做局部模块缓存使用。 以 #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
Copy link
Owner

IVLIU commented Apr 24, 2024

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

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

@1021683053
Copy link
Author

补充一下,如果是这种状态基本判定无法大规模使用,只能做局部模块缓存使用。 以 #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
Copy link
Owner

IVLIU commented Apr 25, 2024

补充一下,如果是这种状态基本判定无法大规模使用,只能做局部模块缓存使用。 以 #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
Copy link
Author

补充一下,如果是这种状态基本判定无法大规模使用,只能做局部模块缓存使用。 以 #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 不知道这样是否可行。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants