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

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

您需要将过渡样式应用于 adiv并在其中渲染一个组件，该组件实现shouldComponentUpdate（例如 with 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或使用pure来自recompose. 这种方式MyComponent只会在道具发生变化时更新。