每个动画上的反应动画渲染-Java 学习之路

使用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秒（这是太长时间）的范围内渲染所有这些时，都会记录高度：
enter image description here

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

1 回答

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 只会在道具更改时更新 .
回复于 2024-05-06T05:06:20+08:00

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

1 回答

相关问题