如何強(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組件刷新問題(函數(shù)組件)
我們使用React進(jìn)行開發(fā)的時(shí)候，有可能會(huì)出現(xiàn)已經(jīng)執(zhí)行了setState()的方法更新過state了，但是為什么組件還是未刷新呢？
這里就會(huì)有一個(gè)概念：地址。類似C，Java這種后端語言一樣。
如果我們的state是一個(gè)復(fù)雜對象的話（數(shù)組，對象）。我們的變量存儲(chǔ)的是state的地址而不是值。
const [object,setObject] = useState({id:'1',name:'張三'})就像上面這段代碼，object這個(gè)state存儲(chǔ)的是{id:'1',name:'張三'}這個(gè)對象在內(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ǔ)的還是地址，并沒有發(fā)生變化，所以是不會(huì)觸發(fā)組件更新的。
那么怎么解決呢，根據(jù)上面的概念，很容易的就能想到只需要改變state的地址就行了。
也就是新創(chuàng)建一個(gè)對象來覆蓋原來的對象，這樣它的地址自然和以前的不一樣。
那么怎么創(chuàng)建一個(gè)新的對象呢？
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ù)。
這樣就能生成一個(gè)新的對象，這下地址就改變了。
const cloneObject = {...object,name:'李四'}
setObject(cloneObject)這個(gè)是利用的ES6的解構(gòu)語法，其實(shí)和下面的方法一樣。只是用起來更加簡潔。
本質(zhì)上都是手動(dòng)創(chuàng)建一個(gè)值一樣的新對象，不過下面的方法不可取，這里只是幫大家理解上面的方法，大家開發(fā)中用上面的寫法進(jìn)行開發(fā)。
const cloneObject = {id:'1',name:'張三'}
cloneObject.name = '李四'
setObject(cloneObject)總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請求返回問題
這篇文章主要介紹了React之配置多個(gè)代理實(shí)現(xiàn)數(shù)據(jù)請求返回問題，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式
這篇文章主要介紹了react實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React?Native性能優(yōu)化指南及問題小結(jié)
本文將介紹在React?Native開發(fā)中常見的性能優(yōu)化問題和解決方案,包括ScrollView內(nèi)無法滑動(dòng)、熱更新導(dǎo)致的文件引用問題、高度獲取、強(qiáng)制橫屏UI適配、低版本RN適配iOS14、緩存清理、navigation參數(shù)取值等,感興趣的朋友一起看看吧2024-01-01
react純函數(shù)組件setState更新頁面不刷新的解決
在開發(fā)過程中，經(jīng)常遇到組件數(shù)據(jù)無法更新，本文主要介紹了react純函數(shù)組件setState更新頁面不刷新的解決，感興趣的可以了解一下2021-06-06
本文主要介紹了詳解React 中組件通信的幾種主要方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
本文主要介紹了React中前端路由的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
本文主要介紹了react 路由Link配置詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
React封裝自定義Hook捕獲所有錯(cuò)誤的實(shí)現(xiàn)方法
在 React 開發(fā)中,錯(cuò)誤處理是確保應(yīng)用穩(wěn)定性和用戶體驗(yàn)的重要部分,React 提供了多種錯(cuò)誤捕獲方式,包括錯(cuò)誤邊界**等,本文將詳細(xì)介紹這些方法,并展示如何封裝一個(gè)能夠捕獲所有同步和異步錯(cuò)誤的自定義 Hook,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了模塊化react-router配置方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了React如何配置src根目錄@,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2024-01-01