如何強(qiáng)制刷新react hooks組件
強(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è)概念：地址。類似C，Java這種后端語(yǔ)言一樣。
如果我們的state是一個(gè)復(fù)雜對(duì)象的話（數(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字符串類型的數(shù)據(jù)。
JSON.parse方法的作用是將傳入的參數(shù)轉(zhuǎn)化為json對(duì)象類型的數(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è)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用refresh_token實(shí)現(xiàn)無(wú)感刷新頁(yè)面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無(wú)感刷新頁(yè)面，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要為大家介紹了React彈窗使用方式NiceModal重新思考分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了react?hooks?d3實(shí)現(xiàn)企查查股權(quán)穿透圖結(jié)構(gòu)圖效果詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
本篇文章主要介紹了React中的refs的使用教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React Native項(xiàng)目中使用Lottie動(dòng)畫(huà)的方法
這篇文章主要介紹了React Native 實(shí)現(xiàn)Lottie動(dòng)畫(huà)的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
React+umi+typeScript創(chuàng)建項(xiàng)目的過(guò)程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過(guò)程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-02-02
react基于react-slick實(shí)現(xiàn)多圖輪播效果
React slick是一個(gè)使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
代碼解析React中setState同步和異步問(wèn)題
前端框架從MVC過(guò)渡到MVVM。從DOM操作到數(shù)據(jù)驅(qū)動(dòng)，一直在不斷的進(jìn)步著，本文給大家介紹React中setState同步和異步問(wèn)題，感興趣的朋友一起看看吧2021-06-06