項(xiàng)目場(chǎng)景

今天又來(lái)填一個(gè)坑！?。?！

問(wèn)題描述

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

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

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

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

好了接下來(lái)好好介紹下。

前言

我們先來(lái)嘮叨嘮叨getDerivedStateFromProps的一些注意點(diǎn)

1、在用getDerivedStateFromProps時(shí)可能出現(xiàn)這樣的問(wè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.

這是提示我們不能再一個(gè)組件尚未mounted時(shí)調(diào)用 setState() 方法，這是一個(gè)空操作，但是可能會(huì)導(dǎo)致bug，因?yàn)槲覀兊膅etDerivedStateFromProps方法在mounted執(zhí)行前會(huì)執(zhí)行一次，但是在mounted執(zhí)行完之前你是不能調(diào)用setState方法，但是可以通過(guò)return{}去修改state的值（這是這個(gè)方法的本質(zhì)我就多不說(shuō)了）

2、在這個(gè)方法中不能用this，因?yàn)檫@是個(gè)靜態(tài)方法

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

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)在我們可以用這個(gè)顏色選擇器來(lái)選擇顏色，同時(shí)我們能傳入一個(gè)顏色值并顯示。

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

我們聯(lián)系下react執(zhí)行更新的條件當(dāng)組件的props或者state發(fā)生變化時(shí)，組件就會(huì)重新重新執(zhí)行一遍更新的生命周期函數(shù)，在16^4中setState 和 forceUpdate就會(huì)觸發(fā)更新，所以 return { color: props.color}后state會(huì)發(fā)生改變又會(huì)走 getDerivedStateFromProps 方法，并把 state 值更新為傳入的 prop，我們來(lái)修理修理，加一個(gè)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 () {
        .... // 顯示顏色和選擇顏色操作
    }
}

代碼展示

下面進(jìn)去我們的主題了，這是我的父組件，子組件通過(guò)子路由的形式放到父組件中

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

這是我子組件中的getDerivedStateFromProps方法，我們先來(lái)看看通過(guò)new一個(gè)新的組建區(qū)調(diào)用函數(shù)（這里我不做上面第三個(gè)問(wèn)題的bug處理了）這里我調(diào)用了一個(gè)打印函數(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沒(méi)輸出，每次num2都是1和sum都是1，這是因?yàn)槊看味际莕ew了一個(gè)新的組件改變的是新組建的值，并不影響原來(lái)的組件，所以不能用來(lái)改變state的值。

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

解決方案

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

我們看代碼：

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

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

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

總結(jié)

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

最新評(píng)論