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
// 當props發(fā)生變化后將值賦給當前組件的state變量
static getDerivedStateFromProps (nextProps, prevState) {
return {
curSth: nextProps.sth
}
}
這里的curSth是定義在子組件內(nèi)state上的變量，sth是通過在父組件中給子組件傳進來的值，而return以后就會將父組件傳進來的值賦值給子組件對應的變量上，也就是此時props已經(jīng)改變了
如果此時進行下一步操作如果做呢？
componentDidUpdate () {
// 當curSth被sth重新賦值后就可以在這里進行props被改變后的操作了
}
具體的實踐案例在之前的一個文章中也有應用到，echarts折線圖作為一個組件，當傳入的值發(fā)生改變后來渲染echarts的繪制
→_→react中使用echarts，并實現(xiàn)tooltip循環(huán)輪播
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決React報錯Cannot?find?namespace?context
這篇文章主要為大家介紹了React報錯Cannot?find?namespace?context分析解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
rematch是對redux的二次封裝，簡化了redux是使用，極大的提高了開發(fā)體驗，這篇文章主要介紹了React狀態(tài)管理器Rematch的使用,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了react項目中使用插件配置路由的相關(guān)知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟
這篇文章主要介紹了在Ant Design Pro登錄功能中集成圖形驗證碼組件的方法步驟，這里的登錄功能其實就是一個表單提交，實現(xiàn)起來也很簡單，具體實例代碼跟隨小編一起看看吧2021-05-05
條件渲染在React里就和js里的條件語句一樣。下面這篇文章主要給大家介紹了關(guān)于React學習記錄之條件渲染的相關(guān)資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07
React Native全面屏狀態(tài)欄和底部導航欄適配教程詳細講解
最近在寫 React Native 項目，調(diào)試應用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結(jié)一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導航欄適配教程2023-01-01
在React類組件中,生命周期方法是非常重要的概念,它們允許我們在組件的不同階段執(zhí)行代碼,這包括在組件掛載、更新以及卸載時執(zhí)行的生命周期方法,本文通過介紹React類組件中的生命周期方法,旨在幫助開發(fā)者深入理解組件的生命周期管理2024-11-11
寫react的時候，踩了幾次坑發(fā)現(xiàn)setstate之后state不會立刻更新，于是判定setstate就是異步的方法，但是直到有一天，我想立刻拿到更新的state去傳參另一個方法的時候，才問自己，為什么setstate是異步的？準確地說，在React內(nèi)部機制能檢測到的地方，setState就是異步的2022-10-10
React特征學習Form數(shù)據(jù)管理示例詳解
這篇文章主要為大家介紹了React特征學習Form數(shù)據(jù)管理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要給大家介紹了關(guān)于react項目中@路徑簡單配置的相關(guān)資料,文中還介紹了React配置@路徑別名的方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09