React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒有更新的問題
父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒有更新
需求：
父組件發(fā)送請(qǐng)求后，根據(jù)返回?cái)?shù)據(jù)實(shí)時(shí)更新部分state，子組件實(shí)時(shí)檢測(cè)跟隨跟新
1.可以使用利用react的componentWillReceiveProps方法
子組件中增加
componentWillReceiveProps(nextProps:any){
this.setState({
reuploadFlag: nextProps.reuploadFlag,
successFlag: nextProps.successFlag,
uperrorFlag: nextProps.uperrorFlag
})
}
2.componentWillReceiveProps方法要被淘汰了，不推薦
componentWillReceiveProps()方法判斷前后兩個(gè) props 是否相同，如果不同再將新的 props 更新到相應(yīng)的 state 上去。
這樣做一來會(huì)破壞 state 數(shù)據(jù)的單一數(shù)據(jù)源，導(dǎo)致組件狀態(tài)變得不可預(yù)測(cè)，另一方面也會(huì)增加組件的重繪次數(shù)。
可以使用getDerivedStateFromProps靜態(tài)方法
3.如果從父組件中傳到的值
在子組件只是用來展示，沒有對(duì)其進(jìn)行操作，直接從props中獲取即可，不用再在子組件的constructor中將props賦值給state
因?yàn)樽咏M件刷新時(shí)，不再執(zhí)行constructor，也就不會(huì)對(duì)state重新賦值，所以子組件雖然執(zhí)行了render，但是渲染數(shù)據(jù)不變。
數(shù)據(jù)只是用來展示的話，不需要像上面這個(gè)在constructor賦值給state
4.也可以在父組件中設(shè)置子組件的key值
來保證每次重新渲染（key值變化）
但是這種方法只能監(jiān)聽一個(gè)參數(shù)
使用ref
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了React 子組件向父組件傳值的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)
這篇文章主要為大家介紹了漸進(jìn)式源碼解析React更新流程驅(qū)動(dòng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要為大家介紹了React 自動(dòng)聚焦字段使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
React中實(shí)現(xiàn)父組件調(diào)用子組件的三種方法
在React中,組件之間的通信是一個(gè)常見的需求,有時(shí),我們需要從父組件調(diào)用子組件的方法,這可以通過幾種不同的方式實(shí)現(xiàn),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了VSCode搭建React Native環(huán)境，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟
這篇文章主要介紹了使用 Rails API 構(gòu)建一個(gè) React 應(yīng)用程序的詳細(xì)步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關(guān)操作，具有內(nèi)容詳情跟隨小編一起看看吧2021-08-08
webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解
本篇文章主要介紹了webpack 2.x配置reactjs基本開發(fā)環(huán)境詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn)
本文主要介紹了react版模擬亞馬遜人機(jī)交互菜單的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用詳解
這篇文章主要介紹了React router動(dòng)態(tài)加載組件之適配器模式的應(yīng)用 ,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目
這篇文章主要介紹了react以create-react-app為基礎(chǔ)創(chuàng)建項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03