Làm thế nào để kiểm tra những gì đạo cụ thay đổi trong componentWillReceiveProps

Question

Có cách nào để kiểm tra đạo cụ nào đã thay đổi (không lưu trữ đạo cụ cũ ở nơi khác) bên trong componentWillReceiveProps?

ví dụ:

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

Answer 1

Tại điểm trong thời gian đó lifecycle method này được gọi là, this.props đề cập đến các thiết lập trước đó của đạo cụ.

Để so sánh một thuộc tính duy nhất foo trên đạo cụ mới với cùng một thuộc tính trên ảnh cũ, bạn chỉ có thể so sánh newProps.foo với this.props.foo. Vì vậy, trong ví dụ của bạn:

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

Answer 2

Bạn vẫn có thể so sánh với this.props.profileImage, bởi vì nó không được cập nhật cho đến sau componentWilReceiveProps được gọi. Ví dụ, trong docs, ví dụ này được sử dụng:

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

Answer 3

Có, bạn có thể kiểm tra xem có thay đổi cụ thể nào không. this.props đề cập đến các đạo cụ trước chúng đã thay đổi. Vì vậy, ví dụ:

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

Lưu ý: Các đạo cụ không nhất thiết thay đổi mỗi khi phương pháp này được gọi là, vì vậy nó là giá trị thử nghiệm để xem những PROP thay đổi.

Answer 4

Bạn cũng có thể lặp qua tất cả các đạo cụ để xem những gì đã thay đổi.

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