如何強(qiáng)制刷新react hooks組件
強(qiáng)制刷新react hooks組件
首先要知道react組件在什么情況下會刷新，比如：state、props、context更新。。。。
然后就有各種方式可以強(qiáng)行刷新組件了，比如：
const [refresh, setRefresh] = useState(false);
useEffect(() => {
refresh && setTimeout(() => setRefresh(false))
}, [refresh])
const doRefresh = () => setRefresh(true)react組件刷新問題(函數(shù)組件)
我們使用React進(jìn)行開發(fā)的時候，有可能會出現(xiàn)已經(jīng)執(zhí)行了setState()的方法更新過state了，但是為什么組件還是未刷新呢？
這里就會有一個概念：地址。類似C，Java這種后端語言一樣。
如果我們的state是一個復(fù)雜對象的話（數(shù)組，對象）。我們的變量存儲的是state的地址而不是值。
const [object,setObject] = useState({id:'1',name:'張三'})就像上面這段代碼，object這個state存儲的是{id:'1',name:'張三'}這個對象在內(nèi)存中的地址，而不是值本身。
那么這個概念和react刷新的機(jī)制有什么關(guān)系呢？
因?yàn)镽eact的useState()這個hook的刷新機(jī)制是根據(jù)state存儲的值是否發(fā)生改變而進(jìn)行刷新的。
const cloneObject = object
cloneObject.name = '李四'
setObject(cloneObject)
setObject((preObj)=>{
preObj.name = '李四'
return preObj
})以上兩種setState的方式都不會觸發(fā)組件的刷新，正如我們上面提到的概念，object存儲的地址，雖然我們改變了object里的一個屬性的值，但object本身存儲的還是地址，并沒有發(fā)生變化，所以是不會觸發(fā)組件更新的。
那么怎么解決呢，根據(jù)上面的概念，很容易的就能想到只需要改變state的地址就行了。
也就是新創(chuàng)建一個對象來覆蓋原來的對象，這樣它的地址自然和以前的不一樣。
那么怎么創(chuàng)建一個新的對象呢？
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對象類型的數(shù)據(jù)。
這樣就能生成一個新的對象，這下地址就改變了。
const cloneObject = {...object,name:'李四'}
setObject(cloneObject)這個是利用的ES6的解構(gòu)語法，其實(shí)和下面的方法一樣。只是用起來更加簡潔。
本質(zhì)上都是手動創(chuàng)建一個值一樣的新對象，不過下面的方法不可取，這里只是幫大家理解上面的方法，大家開發(fā)中用上面的寫法進(jìn)行開發(fā)。
const cloneObject = {id:'1',name:'張三'}
cloneObject.name = '李四'
setObject(cloneObject)總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面
本文主要介紹了React如何使用refresh_token實(shí)現(xiàn)無感刷新頁面，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下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的使用教程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React Native項(xiàng)目中使用Lottie動畫的方法
這篇文章主要介紹了React Native 實(shí)現(xiàn)Lottie動畫的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue3中獲取ref元素的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
React+umi+typeScript創(chuàng)建項(xiàng)目的過程
這篇文章主要介紹了React+umi+typeScript創(chuàng)建項(xiàng)目的過程,結(jié)合代碼介紹了項(xiàng)目框架搭建的方式，本文給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-02-02
react基于react-slick實(shí)現(xiàn)多圖輪播效果
React slick是一個使用React構(gòu)建的輪播組件,下面這篇文章主要給大家介紹了關(guān)于react基于react-slick實(shí)現(xiàn)多圖輪播效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
前端框架從MVC過渡到MVVM。從DOM操作到數(shù)據(jù)驅(qū)動，一直在不斷的進(jìn)步著，本文給大家介紹React中setState同步和異步問題，感興趣的朋友一起看看吧2021-06-06