javascript - shouldComponentUpdate 的更好替代方案

Question

我在项目中使用 react 运动动画。我通过维护状态解决了每次 Prop 更改时渲染动画的问题。

const {animation} = this.state;
        if (animation) {
            return (
                 // updates state upon animatioon to false
                 <Animator rest={this.rest}> 
                    {this.getContent()}
                </Animator>
            );
        }
        return this.getContent();

我有一个回调，它将在动画完成后更改我的状态。这解决了除动画时 Prop 更改之外的所有问题。

假设我的动画发生 2 秒，然后触发回调，但如果动画在中间(例如 1 秒)并且我的 Prop 发生变化，那么我的动画再次从头开始。

我不想使用shouldComponentUpdate，因为它会停止更新 View 。

那么这种情况通常是如何处理的。使用 shouldComponentUpdate 可以吗？有更好的替代方案吗？

提前致谢。

Answer 1

如果动画组件在这个组件(名称为A)中渲染，则每次重新渲染A时都会从头开始。因此，我认为您可以在另一个组件 (B) 中渲染动画组件，该组件是 A 的同级，并且位于 A 上并具有透明背景，或者仅使用动画组件作为同级组件。 A 和 B 可以通过其父级或 redux 进行通信。