React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題
更新時間：2024年03月14日 10:51:30 作者：H千面
這篇文章主要介紹了React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
父組件數(shù)據(jù)實時更新了,子組件沒有更新
需求：
父組件發(fā)送請求后，根據(jù)返回數(shù)據(jù)實時更新部分state，子組件實時檢測跟隨跟新
1.可以使用利用react的componentWillReceiveProps方法
子組件中增加
componentWillReceiveProps(nextProps:any){
this.setState({
reuploadFlag: nextProps.reuploadFlag,
successFlag: nextProps.successFlag,
uperrorFlag: nextProps.uperrorFlag
})
}
2.componentWillReceiveProps方法要被淘汰了，不推薦
componentWillReceiveProps()方法判斷前后兩個 props 是否相同，如果不同再將新的 props 更新到相應(yīng)的 state 上去。
這樣做一來會破壞 state 數(shù)據(jù)的單一數(shù)據(jù)源，導(dǎo)致組件狀態(tài)變得不可預(yù)測，另一方面也會增加組件的重繪次數(shù)。
可以使用getDerivedStateFromProps靜態(tài)方法
3.如果從父組件中傳到的值
在子組件只是用來展示，沒有對其進行操作，直接從props中獲取即可，不用再在子組件的constructor中將props賦值給state
因為子組件刷新時，不再執(zhí)行constructor，也就不會對state重新賦值，所以子組件雖然執(zhí)行了render，但是渲染數(shù)據(jù)不變。
數(shù)據(jù)只是用來展示的話，不需要像上面這個在constructor賦值給state
4.也可以在父組件中設(shè)置子組件的key值
來保證每次重新渲染（key值變化）
但是這種方法只能監(jiān)聽一個參數(shù)
使用ref
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解對于React結(jié)合Antd的Form組件實現(xiàn)登錄功能
這篇文章主要介紹了詳解對于React結(jié)合Antd的Form組件實現(xiàn)登錄功能，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
JS中使用react-tooltip插件實現(xiàn)鼠標(biāo)懸浮顯示框
前段時間遇到的一個需求,要求鼠標(biāo)懸停顯示使用描述, 用到了react-tooltip插件,今天寫一個總結(jié)，感興趣的朋友跟隨小編一起看看吧2019-05-05
這篇文章主要為大家介紹了ahooks解決用戶多次提交的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
React hooks依賴數(shù)組:一個讓我加班到凌晨3點的男人
本文解析了React Hooks中依賴數(shù)組的工作機制,詳細闡述了無限循環(huán)、過時閉包、隱性依賴等常見陷阱,提供了解決方案,并總結(jié)了誠實聲明依賴、最小化effect職責(zé)等最佳實踐,感興趣的朋友跟隨小編一起看看吧2026-04-04
本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了使用ES6語法重構(gòu)React代碼詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
在?React?中使用?Context?API?實現(xiàn)跨組件通信的方法
在React中,ContextAPI是一個很有用的特性,可用于組件間的狀態(tài)共享,它允許跨組件傳遞數(shù)據(jù)而無需通過每個組件手動傳遞props,本文給大家介紹在?React?中如何使用?Context?API?來實現(xiàn)跨組件的通信,感興趣的朋友一起看看吧2024-09-09
這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
Modal(模態(tài)框)是 web 開發(fā)中十分常見的組件,即從頁面中彈出的對話框,下面這篇文章主要給大家介紹了關(guān)于React項目中hook實現(xiàn)展示對話框功能的相關(guān)資料,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了在 React 中使用 substring() 方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09