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)文章
React Native使用百度Echarts顯示圖表的示例代碼
本篇文章主要介紹了React Native使用百度Echarts顯示圖表的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
教你應(yīng)用?SOLID?原則整理?React?代碼之單一原則
這篇文章主要介紹了如何應(yīng)用?SOLID?原則整理?React?代碼之單一原則,今天，我們將從一個糟糕的代碼示例開始，應(yīng)用 SOLID 的第一個原則，看看它如何幫助我們編寫小巧、漂亮、干凈的并明確責(zé)任的 React 組件，需要的朋友可以參考下2022-07-07
react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React-hook-form-mui基本使用教程(入門篇)
react-hook-form-mui可以幫助開發(fā)人員更輕松地構(gòu)建表單,它結(jié)合了React?Hook?Form和Material-UI組件庫,使用react-hook-form-mui,開發(fā)人員可以更快速地構(gòu)建表單,并且可以輕松地進(jìn)行表單驗證和數(shù)據(jù)處理,本文介紹React-hook-form-mui基本使用,感興趣的朋友一起看看吧2024-02-02
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制。可以使用受控組件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識，感興趣的朋友一起看看吧2023-01-01
這篇文章主要為大家介紹了react編寫可編輯標(biāo)題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
引入代碼檢查工具stylelint實戰(zhàn)問題經(jīng)驗總結(jié)分享
eslint的配置引入比較簡單，網(wǎng)上有比較多的教程，而stylelint的教程大多語焉不詳。在這里，我會介紹一下我在引入stylelint所遇到的坑，以及解決方法2021-11-11
React Hook Form是一個輕量、高性能、無依賴的表單庫,它通過 React Hooks 提供簡單直觀的 API 來處理表單狀態(tài)和驗證,本文將詳細(xì)介紹 React Hook Form 的功能、使用方法及其最佳實踐,感興趣的朋友一起看看吧2025-05-05
當(dāng)我們要求渲染時間盡量快、頁面響應(yīng)速度快時就會用到服務(wù)端渲染，本篇文章主要介紹了React服務(wù)端渲染，有興趣的可以了解一下2017-07-07
react 通過后端接口實現(xiàn)路由授權(quán)的示例代碼
本文主要介紹了React應(yīng)用中通過后端接口獲取路由授權(quán),實現(xiàn)動態(tài)和靈活的權(quán)限管理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11