更好的替代shouldComponentUpdate [英] Better alternative to shouldComponentUpdate

问题描述

我在项目中使用动画的反应运动，通过保持状态来解决每次道具更改时渲染动画的问题。

I'm using react motion for animations in my project.I solved the problem of rendering animations every time when prop change by maintaining state.

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

我有一个回叫电话，它将在完成动画后改变状态。这解决了除道具外的所有问题

I have a call back that will change my state upon completing of animation.This solves all problems except props changing while animating.

比方说，我的动画发生了2秒钟，然后触发了回叫，但是如果动画在中间（如1秒）并且我的道具发生了变化，我的动画又从头开始。

Let's say my animation happens for 2 seconds and call back is triggered after that, but if animation is in the middle like 1 second and my props change then my animation again start from the beginning.

我不想使用 shouldComponentUpdate ，因为它将停止更新

I don't want to use the shouldComponentUpdate as it will stop updating the view.

那么通常如何处理这种情况。是否可以使用 shouldComponentUpdate 。还有更好的选择吗？

So how is this situation usually handled. Is it ok to use shouldComponentUpdate.Are there any better alternatives?

请先谢谢。

推荐答案

如果在该组件中渲染了动画组件（名称为A），则每次重新渲染A时都将从头开始。因此，我认为您可以在另一个组件（B）中渲染动画组件，该组件（B）是A的兄弟姐妹，并位于具有透明背景的A上方，或者仅将动画组件用作同名对象。 A和B可以通过其父级或Redux进行通信。

If the animation component is rendered in this component (with name A), it will start from beginning every time A is re-rendered. So I think you can render the animation component in another component (B) which is a sibling of A and lies over A with a transparent background, or just use the animation component as the siblling. A and B can communicate via their parent or redux.

这篇关于更好的替代shouldComponentUpdate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！