react中監(jiān)聽props的改變方式
react監(jiān)聽props的改變
componentWillReveiceProps
之前使用componentWillReveiceProps來實現(xiàn)組件更新階段的通信
class xxx extends Component {
/** 省略無關(guān)代碼 **/
componentWillReceiveProps (nextProps) {
if (nextProps.sth !== this.props.sth) {
// sth值發(fā)生改變下一步工作
}
}
}
此時React13.16.0已經(jīng)被改成了UNSAFE_componentWillReceiveProps
從名字也能看出來官方是不建議使用這個鉤子的，但是你非要用，所以就給你個大寫的前綴告訴你這個鉤子是UNSAFE不安全的。
UNSAFE_componentWillReceiveProps
使用方法和componentWillReveiceProps一樣，只是官方給加了個前綴告訴你盡量不要用。
至于為何被拋棄了呢，是因為
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，你的組件就會觸發(fā)componentWillReceiveProps方法，即使你組件接收的props沒有發(fā)生任何變化
像我這樣，如果官方不建議用，那我肯定是要尋找它的替換方法了
既然官方取消了一個方法，自然會給出一個更推薦的方法。
getDerivedStateFromProps
// 當(dāng)props發(fā)生變化后將值賦給當(dāng)前組件的state變量
static getDerivedStateFromProps (nextProps, prevState) {
return {
curSth: nextProps.sth
}
}
這里的curSth是定義在子組件內(nèi)state上的變量，sth是通過在父組件中給子組件傳進(jìn)來的值，而return以后就會將父組件傳進(jìn)來的值賦值給子組件對應(yīng)的變量上，也就是此時props已經(jīng)改變了
如果此時進(jìn)行下一步操作如果做呢？
componentDidUpdate () {
// 當(dāng)curSth被sth重新賦值后就可以在這里進(jìn)行props被改變后的操作了
}
具體的實踐案例在之前的一個文章中也有應(yīng)用到，echarts折線圖作為一個組件，當(dāng)傳入的值發(fā)生改變后來渲染echarts的繪制
→_→react中使用echarts，并實現(xiàn)tooltip循環(huán)輪播
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Redux DevTools不能顯示數(shù)據(jù)問題
這篇文章主要介紹了Redux DevTools不能顯示數(shù)據(jù)問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
react setupProxy.js導(dǎo)致項目無法啟動的解決
這篇文章主要介紹了react setupProxy.js導(dǎo)致項目無法啟動的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了React修改數(shù)組對象的注意事項及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了react項目從新建到部署的實現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家介紹了React?Hydrate原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
這篇文章主要介紹了react 中父組件與子組件雙向綁定問題，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
Redis數(shù)據(jù)結(jié)構(gòu)面試高頻問題解析
這篇文章主要為大家介紹了Redis數(shù)據(jù)結(jié)構(gòu)高頻面試問題解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
將React+Next.js的項目部署到服務(wù)器的方法
本文詳細(xì)介紹了將React+Next.js項目部署到服務(wù)器的步驟,包括服務(wù)器環(huán)境準(zhǔn)備、項目配置與構(gòu)建、啟動服務(wù)、配置Nginx反向代理、HTTPS配置、驗證與監(jiān)控以及高級優(yōu)化,感興趣的朋友一起看看吧2025-03-03
本篇文章主要介紹了react redux入門示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
React教程之Props驗證的具體用法（Props Validation）
這篇文章主要介紹了React教程之Props驗證的具體用法（Props Validation），非常具有實用價值，需要的朋友可以參考下2017-09-09