React實現(xiàn)Vue的watch監(jiān)聽屬性方式
在 Vue 中可以簡單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的。
React中比較復(fù)雜，但是我們?nèi)绻朐?React 中實現(xiàn)一個類似 Vue 的 watch 監(jiān)聽屬性，也不是沒有辦法。
在React類組件中實現(xiàn)watch監(jiān)聽屬性
我們可以使用 componentDidUpdate 函數(shù)來監(jiān)聽組件屬性的變化，來模擬于 Vue 中的watch。
例如，我們有一個組件 MyComponent，其中有一個屬性 name：
class MyComponent extends React.Component {
state = {
name: 'John'
}
componentDidUpdate(prevProps, prevState) {
if (prevState.name !== this.state.name) {
console.log('Name changed to:', this.state.name)
}
}
render() {
return (
<div>
My name is {this.state.name}
</div>
)
}
}在 componentDidUpdate 函數(shù)中，我們可以比較當(dāng)前狀態(tài)和之前的狀態(tài)，當(dāng) name 屬性發(fā)生變化時，就可以執(zhí)行某些操作，例如打印日志。
需要注意的是，在 componentDidUpdate 函數(shù)中，我們還需要比較 prevprops 和 this.props ，以確保只有 name 屬性發(fā)生變化時才會執(zhí)行我們的操作：
componentDidUpdate(prevProps, prevState) {
if (prevProps.name !== this.props.name || prevState.name !== this.state.name) {
console.log('Name changed to:', this.state.name)
}
}這樣我們就可以在 React 類組件中實現(xiàn)類似于 Vue 中 watch 的功能，監(jiān)聽組件屬性的變化并執(zhí)行相應(yīng)的操作。
在React函數(shù)組件中實現(xiàn)watch監(jiān)聽屬性
在 React 中默認(rèn)函數(shù)組件不能使用生命周期。需要配合 React16.8新增的 Hook -- useEffect 才能實現(xiàn)。
使用 React 實現(xiàn)類似 Vue 中的 watch 監(jiān)聽屬性可以通過使用 useEffect hook來完成。
1、引入useEffect hook
import { useEffect } from 'react'; 2、在組件中定義要監(jiān)聽的屬性
const [data, setData] = useState({ name: 'John', age: 25 });
const [name, setName] = useState('');
// 監(jiān)聽data對象的name屬性的變化
useEffect(() => {
console.log(`name: ${data.name}`);
}, [data.name]); 3、監(jiān)聽屬性的變化
// 修改data對象的name屬性的值
setData({...data, name: 'Lucy'}); 當(dāng)data對象的name屬性發(fā)生改變時，useEffect 會觸發(fā)執(zhí)行其回調(diào)函數(shù)，并打印出新的值。
需要注意的是，由于React 中所有組件狀態(tài)都是不可變的，所以我們在修改要監(jiān)聽的屬性時需要使用深拷貝，確保不會影響到原始的值。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
axios請求響應(yīng)數(shù)據(jù)加解密封裝實現(xiàn)詳解
這篇文章主要為大家介紹了axios請求響應(yīng)數(shù)據(jù)加解密封裝實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
使用Axios在React中請求數(shù)據(jù)的方法詳解
這篇文章主要給大家介紹了初學(xué)React,如何規(guī)范的在react中請求數(shù)據(jù),主要介紹了使用axios進(jìn)行簡單的數(shù)據(jù)獲取,加入狀態(tài)變量,優(yōu)化交互體驗,自定義hook進(jìn)行數(shù)據(jù)獲取和使用useReducer改造請求,本文主要適合于剛接觸React的初學(xué)者以及不知道如何規(guī)范的在React中獲取數(shù)據(jù)的人2023-09-09
詳解webpack2+node+react+babel實現(xiàn)熱加載(hmr)
這篇文章主要介紹了詳解webpack2+node+react+babel實現(xiàn)熱加載(hmr) ,非常具有實用價值，需要的朋友可以參考下2017-08-08
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實現(xiàn)之一。它實現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來減少內(nèi)存占用2022-09-09
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-11-11
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實用價值，需要的朋友可以參考下2017-12-12
React實現(xiàn)文件上傳和斷點續(xù)傳功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了React實現(xiàn)文件上傳和斷點續(xù)傳功能的相關(guān)知識,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
React中的useState和useEffect詳細(xì)解析
useState和useEffect是React的兩個重要Hook,用于組件狀態(tài)管理和處理副作用,useState允許添加狀態(tài)變量,控制組件渲染,而useEffect用于執(zhí)行渲染后的副作用操作,本文給大家介紹React中的useState和useEffect詳細(xì)解析,感興趣的朋友跟隨小編一起看看吧2024-10-10
React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫 React Native 項目，調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的，看起來很難受。研究了一下這個問題，現(xiàn)在總結(jié)一下解決方案，這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01
這篇文章主要介紹了React+Koa實現(xiàn)文件上傳的示例，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04