javascript - 带有动画和 useEffect 的 React.useState

Question

我正在尝试使用使用 useState 和 useEffect 的包装器组件来实现动画。

如果 Prop 上的某个值发生变化，我希望它能触发动画的开始:

const propVal = getter(props);
const mounted = useRef(true);
useEffect(() => {
  //code to initialize and start animation removed

  //because a started animation uses requestAnimationFrame
  //a component may want to set state for animation while not
  //mounted anymore, prevent the error by setting mounted to false
  return () => (mounted.current = false);
}, [propVal]);//<--if propVal changes the animation starts

完整代码是 here

propVal 可以是项目的 ID(新项目将以动画形式出现)或名为 deleted 的属性，指示项目已被删除(应该以动画形式消失)

我正在尝试创建一个较小的代码示例来重现我面临但无法(尚未)这样做的问题。

问题是，如果我删除一个项目，那么即使组件没有卸载，mounted.current = false(从 useEffects 返回的回调)部分也会被调用。

当我将代码更改为 return () => false && (mounted.current = false); 时，基本上删除了保护措施以防止未安装的组件进行动画处理，然后删除项目将进行动画处理而不会出现错误。这告诉我组件没有卸载，但以某种方式调用了 onUnmount 的返回回调。

很抱歉(还)不能提供这个问题的更简单的重现。也许有人知道为什么在组件明显没有卸载时会调用回调(移除安全 guard 不会导致错误并按预期进行动画处理)

Answer 1

如果我没理解错的话，你应该在 effect 中将 mounted ref 设置为 true。 否则，对 propVal 依赖项的任何更改都会使 recurAnimate 停止工作。

假设值从 id => 变为“已删除”， 清理效果运行但组件未卸载， 然后效果以新值再次运行，但 isMounted ref 保持 recurAnimate 锁定。

编辑:从 effect !== componentWillUnmount 返回的清理函数。 它会在每次效果重新运行时运行，最后在组件卸载时运行。