componentWillReceiveProps에서 변경된 소품을 확인하는 방법

Question

componentWillReceiveProps 안에 소품이 무엇인지 (소품을 다른 곳에 보관하지 않고) 변경되었는지 확인하는 방법이 있습니까?

즉

componentWillReceiveProps (newProps) { 
    if(/* newProps.profileImage is different to previous props */) /* do stuff */ 
} 

Answer 1

, this.props 소품의 이전 세트를 의미한다.

오래된 것들에 동일한 속성을 가진 새로운 소품에 하나의 속성 foo을 비교하기 위해, 당신은 단지 this.props.foo와 newProps.foo을 비교할 수 있습니다. 따라서 귀하의 예 :

componentWillReceiveProps (newProps) { 
    if(newProps.profileImage !== this.props.profileImage) /* do stuff */ 
} 

Answer 2

이 componentWilReceiveProps가 호출 될 때까지 업데이트되지 않기 때문에 당신은 여전히 ​​this.props.profileImage에 비교할 수 있습니다. 예를 들어, docs,이 예에 사용된다 :

lifecycle method이 호출되는 시점에서

componentWillReceiveProps: function(nextProps) { 
    this.setState({ 
    likesIncreasing: nextProps.likeCount > this.props.likeCount 
    }); 
} 

Answer 3

예, 특정 소품이 변경되었는지 확인할 수 있습니다. this.props은이 변경되기 전에 소품 을 나타냅니다. 그래서 예를 들면 :

componentWillReceiveProps(newProps) { 
    if(newProps.profileImage != this.props.profileImage) { 
    /* do stuff */ 
    } 
} 

참고 : 소품이 반드시 메소드가 호출 될 때마다 변경하지 않는, 그래서 변화 소유하는보고 테스트 가치가있다.

Answer 4

변경된 내용을 보려면 모든 소품을 반복 할 수도 있습니다.

componentWillReceiveProps(nextProps) { 
    for (const index in nextProps) { 
    if (nextProps[index] !== this.props[index]) { 
     console.log(index, this.props[index], '-->', nextProps[index]); 
    } 
    } 
}