天天看點

react——父元件props發生變化時調用的生命周期函數

在做項目的時候遇到問題:

兩個子元件和一個父元件

子元件1改變了某個值通過狀态提升到共同的父元件,然後子元件2要使用更新後的資料

componentWillReceiveProps(nextProps) {
//判斷如果props發生改變
    if (nextProps.keys !== this.props.keys) {
      this.setState({
        keys:this.props.keys
      });
    }
  }
           

總結一下我目前的了解:

1.元件第一次渲染時不會執行componentWillReceiveProps;

2.當props發生變化的時時候會執行componentWillReceiveProps;

3.在componentWillReceiveProps裡面,舊的屬性可以通過this.props來擷取,新的屬性則可以通過參數nextProps來擷取;

4.此函數可以通過調用this.setState()來更新元件狀态,并且不會引起第二次的渲染

5.也可在此函數内根據需要調用自己的自定義函數,來對prop的改變做出一些響應。