react子組件接收的props賦值給state的陷阱問(wèn)題
react子組件接收的props賦值給state的陷阱
一般情況下，子組件接收到父組件傳來(lái)的props
當(dāng)做變量直接用就可以，但是個(gè)別情況下子組件需要將props賦值給state。
一開(kāi)始，按照常規(guī)寫(xiě)法
class Child extends React.Component {
constructor(props) {
super(props)
this.state = {
list: props.list
}
}
}會(huì)發(fā)現(xiàn)，頁(yè)面會(huì)重新渲染，但是頁(yè)面數(shù)據(jù)并沒(méi)有變化。
這涉及到要熟悉react的生命周期（圖片來(lái)自于jianshu.com/p/b331d0e4b398，深表感謝）
當(dāng)父組件更新導(dǎo)致子組件更新時(shí)
子組件的生命周期執(zhí)行順序是
componentWillReceiveProps --> shouldComponentUpdate --> componentWillUpdate --> render --> componentDidUpdate
也就是說(shuō)子組件刷新的時(shí)候，不再執(zhí)行constructor
當(dāng)然也就不會(huì)對(duì)state重新賦值，所以子組件雖然執(zhí)行了render，但是渲染數(shù)據(jù)不變。
解決此問(wèn)題并不難
就是在componentWillReceiveProps中重新對(duì)state賦值，即可。
componentWillReceiveProps(props) {
this.setState({
list: props.list
})
}只有類組件有此問(wèn)題，函數(shù)組件沒(méi)有此問(wèn)題。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
深入了解響應(yīng)式React Native Echarts組件
近年來(lái)，隨著移動(dòng)端對(duì)數(shù)據(jù)可視化的要求越來(lái)越高，通過(guò) WebView 在移動(dòng)端使用 Echarts 這樣功能強(qiáng)大的前端數(shù)據(jù)可視化庫(kù)，是解決問(wèn)題的好辦法。下面就和小編來(lái)一起學(xué)習(xí)一下吧2019-05-05
Header組件熱門(mén)搜索欄的實(shí)現(xiàn)示例
這篇文章主要為大家介紹了Header組件熱門(mén)搜索欄的實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React創(chuàng)建配置項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了React創(chuàng)建配置項(xiàng)目的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-06-06
這篇文章主要介紹了React Native 腳手架的基本使用詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境
這篇文章主要介紹了詳解使用WebPack搭建React開(kāi)發(fā)環(huán)境，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
antd之RangePicker設(shè)置默認(rèn)值方式
這篇文章主要介紹了antd之RangePicker設(shè)置默認(rèn)值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)
這篇文章主要介紹了自己動(dòng)手封裝一個(gè)React Native多級(jí)聯(lián)動(dòng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學(xué)習(xí)Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React報(bào)錯(cuò)之Parameter event implicitly has a
這篇文章主要為大家介紹了React報(bào)錯(cuò)之Parameter event implicitly has an any type，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08