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