每个动画上的反应动画渲染

Question

使用React-Motion（https://github.com/chenglou/react-motion），我的表现非常糟糕。我正在设置从0到260的表格行下拉列表的高度。

constructor() {
    this.state = {
        opened: false
    }

    this.handleRowClick = this.handleRowClick.bind(this)
}

handleRowClick() {
    this.setState({
        opened: !this.state.opened
    })
}

render() {
    <Motion style={{height: spring(this.state.opened ? 260 : 0, {stiffness: 140, damping: 30})}}>
        {(height) => 
            <div onClick={this.handleRowClick}>
                <div style={height}>
                    ...stuff goes here
                </div>
            </div>
        }
    </Motion>
}

动画正在按预期工作，但是每次在大约5秒（这是太长时间）的范围内渲染所有这些时，都会记录高度：

也许我误读了文档中的某些内容，但有没有办法避免动画滞后？

Answer 1

您需要将过渡样式应用于div并在其中呈现实现shouldComponentUpdate的组件（例如，使用React.PureComponent），以防止在不需要时重新呈现

render () {
  <Motion 
    style={{
      height: spring(
        this.state.opened ? 260 : 0, 
        { stiffness: 140, damping: 30 }
      )
    }}
  >
    {(height) => 
      <div style={height}>
        <YourComponent />
      </div>
    }
  </Motion>
}

而MyComponent可能类似于class MyComponent extends React.PureComponent或使用来自recompose的pure之类的HOC。这种方式MyComponent只会在道具更改时更新。