アニメーションごとのリアクションモーションレンダリング

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秒（WAY長すぎる）のスパンでこのすべてをレンダリングするたびにログインするときにされています

たぶん私は読み違えますドキュメント内には何かがありますが、アニメーションの遅れを避ける方法はありますか？

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は小道具の変更時にのみ更新されます。