強(qiáng)制刷新react hooks組件

首先要知道react組件在什么情況下會(huì)刷新，比如：state、props、context更新。。。。

然后就有各種方式可以強(qiáng)行刷新組件了，比如：

const [refresh, setRefresh] = useState(false);
 
useEffect(() => {
    refresh && setTimeout(() => setRefresh(false))
}, [refresh])
 
const doRefresh = () => setRefresh(true)

react組件刷新問(wèn)題(函數(shù)組件)

我們使用React進(jìn)行開(kāi)發(fā)的時(shí)候，有可能會(huì)出現(xiàn)已經(jīng)執(zhí)行了setState()的方法更新過(guò)state了，但是為什么組件還是未刷新呢？

這里就會(huì)有一個(gè)概念：地址。類(lèi)似C，Java這種后端語(yǔ)言一樣。

如果我們的state是一個(gè)復(fù)雜對(duì)象的話(huà)（數(shù)組，對(duì)象）。我們的變量存儲(chǔ)的是state的地址而不是值。

const [object,setObject] = useState({id:'1',name:'張三'})

就像上面這段代碼，object這個(gè)state存儲(chǔ)的是{id:'1',name:'張三'}這個(gè)對(duì)象在內(nèi)存中的地址，而不是值本身。

那么這個(gè)概念和react刷新的機(jī)制有什么關(guān)系呢？

因?yàn)镽eact的useState()這個(gè)hook的刷新機(jī)制是根據(jù)state存儲(chǔ)的值是否發(fā)生改變而進(jìn)行刷新的。

const cloneObject = object
cloneObject.name = '李四'
setObject(cloneObject)
setObject((preObj)=>{
    preObj.name = '李四'
    return preObj
})

以上兩種setState的方式都不會(huì)觸發(fā)組件的刷新，正如我們上面提到的概念，object存儲(chǔ)的地址，雖然我們改變了object里的一個(gè)屬性的值，但object本身存儲(chǔ)的還是地址，并沒(méi)有發(fā)生變化，所以是不會(huì)觸發(fā)組件更新的。

那么怎么解決呢，根據(jù)上面的概念，很容易的就能想到只需要改變state的地址就行了。

也就是新創(chuàng)建一個(gè)對(duì)象來(lái)覆蓋原來(lái)的對(duì)象，這樣它的地址自然和以前的不一樣。

那么怎么創(chuàng)建一個(gè)新的對(duì)象呢？

const cloneObject = JSON.parse(JSON.stringify(object))
cloneObject.name = '李四'
setObject(cloneObject)

JSON.stringify方法的作用是將傳入的參數(shù)轉(zhuǎn)化為json字符串類(lèi)型的數(shù)據(jù)。

JSON.parse方法的作用是將傳入的參數(shù)轉(zhuǎn)化為json對(duì)象類(lèi)型的數(shù)據(jù)。

這樣就能生成一個(gè)新的對(duì)象，這下地址就改變了。

const cloneObject = {...object,name:'李四'}
setObject(cloneObject)

這個(gè)是利用的ES6的解構(gòu)語(yǔ)法，其實(shí)和下面的方法一樣。只是用起來(lái)更加簡(jiǎn)潔。

本質(zhì)上都是手動(dòng)創(chuàng)建一個(gè)值一樣的新對(duì)象，不過(guò)下面的方法不可取，這里只是幫大家理解上面的方法，大家開(kāi)發(fā)中用上面的寫(xiě)法進(jìn)行開(kāi)發(fā)。

const cloneObject = {id:'1',name:'張三'}
cloneObject.name = '李四'
setObject(cloneObject)

總結(jié)

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

最新評(píng)論