javascript - 每个动画的 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 code>) 以防止它在不需要时重新渲染。

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 只会在 props 更改时更新。