react中監(jiān)聽(tīng)props的改變方式
react監(jiān)聽(tīng)props的改變
componentWillReveiceProps
之前使用componentWillReveiceProps來(lái)實(shí)現(xiàn)組件更新階段的通信
class xxx extends Component {
/** 省略無(wú)關(guān)代碼 **/
componentWillReceiveProps (nextProps) {
if (nextProps.sth !== this.props.sth) {
// sth值發(fā)生改變下一步工作
}
}
}
此時(shí)React13.16.0已經(jīng)被改成了UNSAFE_componentWillReceiveProps
從名字也能看出來(lái)官方是不建議使用這個(gè)鉤子的，但是你非要用，所以就給你個(gè)大寫(xiě)的前綴告訴你這個(gè)鉤子是UNSAFE不安全的。
UNSAFE_componentWillReceiveProps
使用方法和componentWillReveiceProps一樣，只是官方給加了個(gè)前綴告訴你盡量不要用。
至于為何被拋棄了呢，是因?yàn)?/p>
Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.
只要父組件引起了你的組件的 重新render，你的組件就會(huì)觸發(fā)componentWillReceiveProps方法，即使你組件接收的props沒(méi)有發(fā)生任何變化
像我這樣，如果官方不建議用，那我肯定是要尋找它的替換方法了
既然官方取消了一個(gè)方法，自然會(huì)給出一個(gè)更推薦的方法。
getDerivedStateFromProps
// 當(dāng)props發(fā)生變化后將值賦給當(dāng)前組件的state變量
static getDerivedStateFromProps (nextProps, prevState) {
return {
curSth: nextProps.sth
}
}
這里的curSth是定義在子組件內(nèi)state上的變量，sth是通過(guò)在父組件中給子組件傳進(jìn)來(lái)的值，而return以后就會(huì)將父組件傳進(jìn)來(lái)的值賦值給子組件對(duì)應(yīng)的變量上，也就是此時(shí)props已經(jīng)改變了
如果此時(shí)進(jìn)行下一步操作如果做呢？
componentDidUpdate () {
// 當(dāng)curSth被sth重新賦值后就可以在這里進(jìn)行props被改變后的操作了
}
具體的實(shí)踐案例在之前的一個(gè)文章中也有應(yīng)用到，echarts折線圖作為一個(gè)組件，當(dāng)傳入的值發(fā)生改變后來(lái)渲染echarts的繪制
→_→react中使用echarts，并實(shí)現(xiàn)tooltip循環(huán)輪播
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React Native使用百度Echarts顯示圖表的示例代碼
本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個(gè)糟糕的代碼示例開(kāi)始，應(yīng)用 SOLID 的第一個(gè)原則，看看它如何幫助我們編寫(xiě)小巧、漂亮、干凈的并明確責(zé)任的 React 組件，需要的朋友可以參考下2022-07-07
react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開(kāi)發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫(kù),使用react-hook-form-mui,開(kāi)發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗(yàn)證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧2024-02-02
具體來(lái)說(shuō)這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來(lái)實(shí)現(xiàn)。下面就說(shuō)說(shuō)這個(gè)React中的受控組件與非受控組件的相關(guān)知識(shí)，感興趣的朋友一起看看吧2023-01-01
這篇文章主要為大家介紹了react編寫(xiě)可編輯標(biāo)題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
引入代碼檢查工具stylelint實(shí)戰(zhàn)問(wèn)題經(jīng)驗(yàn)總結(jié)分享
eslint的配置引入比較簡(jiǎn)單，網(wǎng)上有比較多的教程，而stylelint的教程大多語(yǔ)焉不詳。在這里，我會(huì)介紹一下我在引入stylelint所遇到的坑，以及解決方法2021-11-11
React Hook Form是一個(gè)輕量、高性能、無(wú)依賴的表單庫(kù),它通過(guò) React Hooks 提供簡(jiǎn)單直觀的 API 來(lái)處理表單狀態(tài)和驗(yàn)證,本文將詳細(xì)介紹 React Hook Form 的功能、使用方法及其最佳實(shí)踐,感興趣的朋友一起看看吧2025-05-05
當(dāng)我們要求渲染時(shí)間盡量快、頁(yè)面響應(yīng)速度快時(shí)就會(huì)用到服務(wù)端渲染，本篇文章主要介紹了React服務(wù)端渲染，有興趣的可以了解一下2017-07-07
react 通過(guò)后端接口實(shí)現(xiàn)路由授權(quán)的示例代碼
本文主要介紹了React應(yīng)用中通過(guò)后端接口獲取路由授權(quán),實(shí)現(xiàn)動(dòng)態(tài)和靈活的權(quán)限管理,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11