項目場景

今天又來填一個坑?。。?！

問題描述

最近寫的react項目中用到getDerivedStateFromProps ，這可把我折騰壞了，先說說我想實現(xiàn)的目標(biāo)吧，在一個組件中當(dāng)它的props發(fā)生變化時，組件需要重新獲取對應(yīng)的數(shù)據(jù)刷新頁面，一開始我想到的是getDerivedStateFromProps不是能監(jiān)聽到props的變化嗎，

我就直接在這個函數(shù)中調(diào)用獲取數(shù)據(jù)的方法，這里要注意getDerivedStateFromProps是靜態(tài)方法不能用this直接調(diào)用組件中的方法，就想起上次看了一篇博客博主用的是new一個新的組件(下面會具體介紹)，

讓這個組件去調(diào)用組件中的方法,本來感覺有救了但是這又掉入另一個坑，如果只是想調(diào)用一些方法去實現(xiàn)簡單的console.log()，這完全沒問題，

但是想去修改這個組件的數(shù)據(jù)就有問題了，然后就繞過這個坑想想其他法子，最終通過一些自己都覺得復(fù)雜的過程實現(xiàn)了，但是對我來說這肯定不行，然后又去找了許多資料最后通過初始值和 key 值來實現(xiàn) prop 改變 state ，

好了接下來好好介紹下。

前言

我們先來嘮叨嘮叨getDerivedStateFromProps的一些注意點

1、在用getDerivedStateFromProps時可能出現(xiàn)這樣的問題

Can’t call setState on a component that is not yet mounted.

This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the *** component.

這是提示我們不能再一個組件尚未mounted時調(diào)用 setState() 方法，這是一個空操作，但是可能會導(dǎo)致bug，因為我們的getDerivedStateFromProps方法在mounted執(zhí)行前會執(zhí)行一次，但是在mounted執(zhí)行完之前你是不能調(diào)用setState方法，但是可以通過return{}去修改state的值（這是這個方法的本質(zhì)我就多不說了）

2、在這個方法中不能用this，因為這是個靜態(tài)方法

3、出現(xiàn)死循環(huán)這是使用這個生命周期的一個常見 bug，我們來看的例子

Class ColorPicker extends React.Component {
    state = {
        color: '#000000'
    }
    static getDerivedStateFromProps (props, state) {
        if (props.color !== state.color) {
            return {
                color: props.color
            }
        }
        return null
    }
    ... // 選擇顏色方法
    render () {
        .... // 顯示顏色和選擇顏色操作
    }
}

現(xiàn)在我們可以用這個顏色選擇器來選擇顏色，同時我們能傳入一個顏色值并顯示。

但是這個組件有一個 bug，我們傳入一個顏色值后它能正確顯示，但是再使用組件內(nèi)部的選擇顏色方法，我們會發(fā)現(xiàn)顏色不會變化，一直是傳入的顏色值這是為什么呢？

我們聯(lián)系下react執(zhí)行更新的條件當(dāng)組件的props或者state發(fā)生變化時，組件就會重新重新執(zhí)行一遍更新的生命周期函數(shù)，在16^4中setState 和 forceUpdate就會觸發(fā)更新，所以 return { color: props.color}后state會發(fā)生改變又會走 getDerivedStateFromProps 方法，并把 state 值更新為傳入的 prop，我們來修理修理，加一個preColor去保存新的color如果上次的preColor和這次props中的color相同就不需要更新

Class ColorPicker extends React.Component {
    state = {
        color: '#000000',
        preColor: ''
    }
    static getDerivedStateFromProps (props, state) {
        if (props.color !== state.preColor) {
            return {
                color: props.color
                prevPropColor: props.color
            }
        }
        return null
    }
    ... // 選擇顏色方法
    render () {
        .... // 顯示顏色和選擇顏色操作
    }
}

代碼展示

下面進去我們的主題了，這是我的父組件，子組件通過子路由的形式放到父組件中

<div className={Css['goods-content']}>
    <Switch>
      <Route path={config.path+"goods/classify/items"} component={GoodsItems}></Route>
    </Switch>
</div>

這是我子組件中的getDerivedStateFromProps方法，我們先來看看通過new一個新的組建區(qū)調(diào)用函數(shù)（這里我不做上面第三個問題的bug處理了）這里我調(diào)用了一個打印函數(shù) 

  static getDerivedStateFromProps(newProps,preState)
    {
        new GoodsItems(newProps).console();
        return null;
    }
    console(){
        console.log("111")
    }

這里我們看到可以正確打印，但是我們現(xiàn)在城市去改變組件中的值

 this.state = {
      aGoods: [],
      cid:null,
      precid:null,
      num:1
}
        this.sum=0;
     static getDerivedStateFromProps(newProps,preState)
    {
        new GoodsItems(newProps).change();
        return null;
    }
   change(){
       this.setState({
           num:2
       },()=>{
           console.log("num1: ",this.state.num)
       })
       this.sum=this.sum+1;
       console.log("num2: ",this.state.num)
       console.log("sum: ",this.sum)
    }

我們可以看到num1沒輸出，每次num2都是1和sum都是1，這是因為每次都是new了一個新的組件改變的是新組建的值，并不影響原來的組件，所以不能用來改變state的值。

我不賣關(guān)子了直接上解決方案。

解決方案

我們將子組件直接放到父組件上，不使用子路由，然后給子組件加上一個key指，每次子組件需要更新時就將key值改變，這樣的話就相當(dāng)于重新加載了一個新的子組件而不是僅僅去更新數(shù)據(jù)

我們看代碼：

<div className={Css['goods-content']}>
   <GoodsItems aGoods={this.state.aGoods ? this.state.aGoods: ''} key={this.state.cid}/>
</div>

這里我們也可以將數(shù)據(jù)傳入，子組件在mounted時候進行setState修改數(shù)據(jù)

這是官網(wǎng)的解釋

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論