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)聽的屬性時需要使用深拷貝，確保不會影響到原始的值。
到此這篇關(guān)于React實現(xiàn)Vue的watch監(jiān)聽屬性的文章就介紹到這了,更多相關(guān)Reactwatch監(jiān)聽屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
用表格進行頁面布局,頁面布局在各種瀏覽器的的兼容性, 本文主要介紹了詳解React中合并單元格的正確寫法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
React中的權(quán)限組件設(shè)計問題小結(jié)
這篇文章主要介紹了React中的權(quán)限組件設(shè)計,整個過程也是遇到了很多問題，本文主要來做一下此次改造工作的總結(jié)，對React權(quán)限組件相關(guān)知識感興趣的朋友一起看看吧2022-07-07
本文主要介紹了react16中的hooks的底層實現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09
React Native 集成jpush-react-native的示例代碼
這篇文章主要介紹了React Native 集成jpush-react-native的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了react 下拉框內(nèi)容回顯,實現(xiàn)思路是通過將下拉框選項的value和label一起存儲到state中, 初始化表單數(shù)據(jù)時將faqType對應(yīng)的label查找出來并設(shè)置到Form.Item中,最后修改useEffect,需要的朋友可以參考下2024-05-05
本篇文章主要介紹了詳解React開發(fā)必不可少的eslint配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
阿里低代碼框架lowcode-engine自定義設(shè)置器詳解
這篇文章主要為大家介紹了阿里低代碼框架lowcode-engine自定義設(shè)置器示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
在React中實現(xiàn)代碼熱重載(HMR)的操作步驟
在現(xiàn)代 React 開發(fā)中,代碼熱重載(HMR)是一項極大提升開發(fā)效率的技術(shù),它允許在不刷新整個頁面的情況下,實時更新模塊代碼,從而保留應(yīng)用狀態(tài),避免因頁面刷新導(dǎo)致的狀態(tài)丟失,本文將深入探討如何在 React 項目中實現(xiàn) HMR,包括其原理、配置步驟以及最佳實踐2025-05-05
詳解react中useCallback內(nèi)部是如何實現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來分析一下useCallback內(nèi)部是如何實現(xiàn)的，感興趣的小伙伴跟著小編一起來學(xué)習(xí)吧2023-07-07
React中updateContainerImpl方法更新容器源碼解析
updateContainerImpl方法是React中更新容器的核心方法,負(fù)責(zé)創(chuàng)建和調(diào)度更新,通過createUpdate方法創(chuàng)建更新對象,并通過enqueueUpdate方法將其加入Fiber節(jié)點的更新隊列,本文介紹React中updateContainerImpl方法更新容器源碼分析,感興趣的朋友一起看看吧2026-01-01