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