欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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.如果從父組件中傳到的值

在子組件只是用來展示，沒有對其進(jìn)行操作，直接從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)文章

最新評論