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)文章
關(guān)于react useState更新異步問(wèn)題
這篇文章主要介紹了關(guān)于react useState更新異步問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。2022-08-08
useEffect是React中的一個(gè)鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對(duì)大家有所幫助2023-08-08
React入門(mén)教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開(kāi)發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產(chǎn)生了react。后來(lái)反響很好,所以于2013年5月開(kāi)源。下面這篇文章主要給大家介紹了關(guān)于React入門(mén)教程之Hello World以及環(huán)境搭建的相關(guān)資料，需要的朋友可以參考借鑒。2017-07-07
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07![react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問(wèn)題](http://img.jbzj.com/images/xgimg/bcimg4.png)
react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問(wèn)題
本文主要介紹了react-native 配置@符號(hào)絕對(duì)路徑配置和絕對(duì)路徑?jīng)]有提示的問(wèn)題,文中通過(guò)圖文示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
React-router?v6在Class組件和非組件代碼中的正確使用
這篇文章主要介紹了React-router?v6在Class組件和非組件代碼中的正確使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用React Profiler進(jìn)行性能優(yōu)化方案詳解
在現(xiàn)代前端開(kāi)發(fā)中,性能優(yōu)化是一個(gè)不可忽視的重要環(huán)節(jié),在 React 生態(tài)系統(tǒng)中,React Profiler 是一個(gè)強(qiáng)大的工具,下面我們來(lái)看看如何使用它來(lái)提升我們的 React 應(yīng)用吧2025-03-03
基于Cloud?Studio構(gòu)建React完成點(diǎn)餐H5頁(yè)面(騰訊云?Cloud?Studio?實(shí)戰(zhàn)訓(xùn)練營(yíng))
最近也是有機(jī)會(huì)參與到了騰訊云舉辦的騰訊云Cloud Studio實(shí)戰(zhàn)訓(xùn)練營(yíng)，借此了解了騰訊云Cloud?Studio產(chǎn)品,下面就來(lái)使用騰訊云Cloud?Studio做一個(gè)實(shí)戰(zhàn)案例來(lái)深入了解該產(chǎn)品的優(yōu)越性吧,感興趣的朋友跟隨小編一起看看吧2023-08-08
React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵
這篇文章主要介紹了React如何實(shí)現(xiàn)全屏監(jiān)聽(tīng)Esc鍵，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React如何解決fetch跨域請(qǐng)求時(shí)session失效問(wèn)題
這篇文章主要給大家介紹了關(guān)于React如何解決fetch跨域請(qǐng)求時(shí)session失效問(wèn)題的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11