2016-09-30 2 views
1

내 프로젝트의 애니메이션에 반응 모션을 사용하고 있습니다. 상태를 유지함으로써 소품이 변경 될 때마다 애니메이션 렌더링 문제를 해결했습니다.shouldComponentUpdate에 대한 더 나은 대안

const {animation} = this.state; 
     if (animation) { 
      return (
       // updates state upon animatioon to false 
       <Animator rest={this.rest}> 
        {this.getContent()} 
       </Animator> 
      ); 
     } 
     return this.getContent(); 

애니메이션 완료시 상태가 변경 될 수있는 콜백이 있습니다. 애니메이션 처리 중 변경되는 소품을 제외한 모든 문제를 해결합니다.

내 애니메이션이 2 초 동안 발생하고 그 후에 콜백이 발생한다고 가정 해 봅시다. 그러나 애니메이션이 1 초 정도의 중간에 있고 내 소품이 바뀌면 내 애니메이션이 처음부터 다시 시작됩니다.

shouldComponentUpdate은보기를 업데이트하지 않으므로 사용하지 않으려합니다.

그래서이 상황은 보통 어떻게 처리됩니까? shouldComponentUpdate을 사용하는 것이 좋습니다. 더 좋은 대안이 있습니까?

미리 감사드립니다.

+0

소품 변경을 처리하기 위해'componentWillReceiveProps'를 사용하고 있습니까? 또는 소품에 직접 바인딩 된 무엇인가? –

+0

위의 @BradBumbalough는 내 소품이 바뀔 때 렌더링하는 내 렌더링 함수에 있습니다. – StateLess

답변

0

애니메이션 구성 요소가이 구성 요소 (이름 A)에 렌더링되면 A가 다시 렌더링 될 때마다 시작됩니다. 그래서 나는 형제 인 인 A의 다른 구성 요소 (B)에 애니메이션 구성 요소를 렌더링 할 수 있고 투명 배경으로 A 위에 있거나 단순히 애니메이션 구성 요소를 형제로 사용할 수 있다고 생각합니다. A와 B는 부모님이나 재계자를 통해 통신 할 수 있습니다.

관련 문제