Блог

Главная - Вопросы по программированию - Лучшая альтернатива shouldComponentUpdate

Лучшая альтернатива shouldComponentUpdate

#javascript #animation #reactjs #web #browser

#javascript #Анимация #reactjs #веб #браузер

Вопрос:

Я использую react motion для анимации в своем проекте.Я решил проблему рендеринга анимации каждый раз при изменении реквизита, поддерживая состояние.

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

У меня есть обратный вызов, который изменит мое состояние после завершения анимации.Это решает все проблемы, кроме изменения реквизита во время анимации.

Допустим, моя анимация происходит в течение 2 секунд, и после этого запускается обратный вызов, но если анимация находится в середине, например, 1 секунда, и мои реквизиты меняются, тогда моя анимация снова начинается с начала.

Я не хочу использовать shouldComponentUpdate , так как это остановит обновление представления.

Итак, как обычно решается эта ситуация. Можно ли его использовать shouldComponentUpdate .Есть ли какие-либо лучшие альтернативы?

Заранее спасибо.

Комментарии:

1. Используете ли вы componentWillReceiveProps для обработки изменения реквизита? или что-то напрямую связано с реквизитом?

2. @BradBumbalough приведенный выше код находится в моей функции рендеринга, которая рендерится при изменении моего реквизита

Ответ №1:

Если компонент анимации визуализируется в этом компоненте (с именем A), он будет начинаться с начала каждый раз, когда A повторно визуализируется. Итак, я думаю, вы можете отобразить компонент анимации в другом компоненте (B), который является родственным A и лежит над A с прозрачным фоном, или просто использовать компонент анимации в качестве родственного. A и B могут взаимодействовать через своего родителя или redux.