Как запретить React-Spring запускать анимацию при повторном рендеринге

Я использую react-spring для анимации своих компонентов. Но я хочу, чтобы только запускалась анимация при подключении, а затем анимация выхода при размонтировании. Но моя анимация запускается каждый раз при повторном рендеринге компонента. каждое prop изменение приводит к повторному запуску анимации, чего я не ожидал. Спасибо за помощь заранее.

/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react'
import { Transition, animated, config } from 'react-spring/renderprops'

class Animation extends React.Component {
    constructor(props) {
        super(props)
        this.shouldAnimate = props.shouldAnimate
    }

    render() {
        const Container = animated(this.props.container)
        return (
            <Transition
                items={this.props.items}
                native
                initial={this.props.initial}
                from={this.props.from}
                leave={this.props.leave}
                enter={this.props.enter}
                config={config.gentle}
            >
                {(visible) =>
                    visible &&
                    ((styles) => (
                        <Container
                            style={styles}
                            {...this.props.containerProps}
                        >
                            {this.props.children}
                        </Container>
                    ))
                }
            </Transition>
        )
    }
}

export default Animation

reactjs react-spring
person DANIEL SSEJJEMBA    schedule 30.09.2020    source источник
comment
Используйте shouldComponentUpdate для предотвращения ненужных повторных рендеров или вы можете использовать PureComponent   -  person lissettdm    schedule 30.09.2020
comment
Вы можете использовать React PureComponent, это будет полезно при проблемах повторного рендеринга. Вот ссылка для получения дополнительных сведений [responsejs.org/docs/react-api.html#reactpurecomponent]   -  person Jay Parmar    schedule 30.09.2020
comment
Это нормально, если произойдет повторный рендеринг, мне не нужно, чтобы анимация происходила вместе с ним.   -  person DANIEL SSEJJEMBA    schedule 30.09.2020
comment
Я не вижу проблем с этим кодом. Возможно, что компонент, содержащий компонент «Анимация», перемонтируется, и это приведет к повторному воспроизведению анимации входа. Можете ли вы создать CodeSandbox?   -  person Peter Ambruzs    schedule 30.09.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

/* eslint-disable react/jsx-props-no-spreading */
import * as React from 'react'
import { Transition, animated } from 'react-spring/renderprops'

class Animation extends React.PureComponent {
    constructor(props) {
        super(props)
        this.shouldAnimate = props.shouldAnimate
        this.container = animated(this.props.container)
    }

    render() {
        const Container = this.container
        return (
            <Transition
                items={this.props.items}
                native
                initial={this.props.initial}
                from={this.props.from}
                update={this.props.update}
                leave={this.props.leave}
                enter={this.props.enter}
            >
                {(visible) =>
                    visible &&
                    ((styles) => (
                        <Container
                            style={styles}
                            {...this.props.containerProps}
                        >
                            {this.props.children}
                        </Container>
                    ))
                }
            </Transition>
        )
    }
}

export default Animation
person DANIEL SSEJJEMBA    schedule 01.10.2020