React的componentWillReceiveProps(nextProps)生命週期使用詳解

官方文檔解釋：https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/component_will_receive_props.html

該方法當props發生變化時執行，初始化render時不執行，在這個回調函數裏面，你能夠根據屬性的變化，經過調用this.setState()來更新你的組件狀態，舊的屬性仍是能夠經過this.props來獲取,這裏調用更新狀態是安全的，並不會觸發額外的render調用

使用好處：在這個生命週期中，能夠在子組件的render函數執行前獲取新的props，從而更新子組件本身的state。 能夠將數據請求放在這裏進行執行，須要傳的參數則從componentWillReceiveProps(nextProps)中獲取。而沒必要將全部的請求都放在父組件中。因而該請求只會在該組件渲染時纔會發出，從而減輕請求負擔。componentWillReceiveProps在初始化render的時候不會執行，它會在Component接受到新的狀態(Props)時被觸發，通常用於父組件狀態更新時子組件的從新渲染下面舉個例子：

要實現的功能是Tab切換時，更新列表，這裏每點擊Tab則傳一個typeCode值，假設是1,2,3,後端分頁時接收三個參數，page、pageSize,typeCode，我遇到的問題是點擊Tab時沒有刷新，下邊這樣就能解決：

頁面圖：

解決方法： 

state = { activeKey: '1' };
....
//父組件的：
<Tabs type="card" onChange={(key) => { this.setState({ activeKey: key }); }}>
            {lookupDatas.map((item, key) => (
              <TabPane tab={item.desp} key={item.code}>
                <MonthlyReportInfo detailSearch={this.detailSearch} typeCode={item.code} activeKey={this.state.activeKey} />
              </TabPane>
            ))
            }
 </Tabs>
//子組件的：
  componentWillReceiveProps(nextProps){
    if(this.props.activeKey !== nextProps.activeKey){
      const params = {
        page: 1,
        pageSize: 10,
        typeCode: nextProps.activeKey,
        queryFilter: this.state.formValues,
      };
      this.getData(params);
    }
  }