Reactjs 如何停止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

/*eslint禁用react/jsx道具无扩散*/
从“React”导入*作为React
从“react spring/renderprops”导入{转换，动画，配置}
类动画扩展了React.Component{
建造师（道具）{
超级（道具）
this.shouldAnimate=props.shouldAnimate
}
render（）{
const Container=已设置动画（this.props.Container）
返回(
{（可见）=>
可见的&&
（（风格）=>(
{this.props.children}
))
}
)
}
}
导出默认动画

在仔细查看我的组件并记录生命周期方法调用之后，我找到了问题的解决方案。我发现每个道具的改变都会导致创建一个新的容器组件，从而导致组件卸载和重新装载，从而导致动画播放。在意识到这一点后，解决方案很简单。我刚把我的文件改成这个，现在它工作得很好

/* 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

/*eslint禁用react/jsx道具无扩散*/
从“React”导入*作为React
从“react spring/renderprops”导入{转换，动画}
类动画扩展了React.PureComponent{
建造师（道具）{
超级（道具）
this.shouldAnimate=props.shouldAnimate
this.container=已设置动画（this.props.container）
}
render（）{
const Container=this.Container
返回(
{（可见）=>
可见的&&
（（风格）=>(
{this.props.children}
))
}
)
}
}
导出默认动画

在仔细查看我的组件并记录生命周期方法调用之后，我找到了问题的解决方案。我发现每个道具的改变都会导致创建一个新的容器组件，从而导致组件卸载和重新装载，从而导致动画播放。在意识到这一点后，解决方案很简单。我刚把我的文件改成这个，现在它工作得很好

/* 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

/*eslint禁用react/jsx道具无扩散*/
从“React”导入*作为React
从“react spring/renderprops”导入{转换，动画}
类动画扩展了React.PureComponent{
建造师（道具）{
超级（道具）
this.shouldAnimate=props.shouldAnimate
this.container=已设置动画（this.props.container）
}
render（）{
const Container=this.Container
返回(
{（可见）=>
可见的&&
（（风格）=>(
{this.props.children}
))
}
)
}
}
导出默认动画

使用shouldComponentUpdate以防止不必要的重新渲染，或者您可以使用PureComponent。您可以使用

React PureComponent

这将有助于解决重新渲染问题。以下是链接以了解更多详细信息[重新渲染没关系，我不需要的是动画随它一起发生。我看不出此代码有任何问题。有可能是包含动画组件的组件重新装载并导致enter动画重放。是否可以创建代码沙盒？使用shouldComponentUpdate以防止不必要的重新渲染或者您可以使用PureComponent您可以使用

React PureComponent

这将有助于重新呈现问题。以下是链接以了解更多详细信息[可以进行重新渲染，但我不需要动画。我看不出此代码有任何问题。可能是包含动画组件的组件重新装载并导致enter动画回放。您可以创建一个CodeSandbox吗？