React-在每个动画上进行运动渲染

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只会在它的道具发生变化时进行更新。