React.useState with animation and useEffect

Question

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

如果道具上的某个值发生变化，我希望它触发动画的开始：

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

完整代码在这里

propVal 可以是项的 ID(新项将在其中进行动画处理(或名为deleted的属性，指示项已被删除(应以动画形式删除(

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

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

当我将代码更改为return () => false && (mounted.current = false);基本上删除保护措施以防止卸载的组件动画时，删除项目将动画而不会出错。这告诉我组件没有被卸载，但不知何故调用了返回的 onUnmount 回调。

很抱歉(尚(无法提供此问题的更简单重现。也许有人知道为什么在组件明显未卸载时会调用回调(删除安全防护不会导致错误并按预期动画(

Answer 1

如果我理解正确，您应该在效果中将挂载的 ref 设置为 true。 否则，对 propVal 依赖项的任何更改都将阻止 recurAnimate 工作。

假设值从 id => 更改为"已删除"， 清理效果运行，但组件未卸载， 然后效果使用新值再次运行，但 isMounted 引用 保持重复动画锁定。

edit：从效果返回的清理函数！==组件将卸载。 每次重新运行效果时，它都会运行，最后在组件卸载时运行。