對每個動畫的反應運動渲染

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或使用像pure一個HOC從recompose。這種方式MyComponent只會在道具更改時更新。