React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性方式
在 Vue 中可以簡(jiǎn)單地使用 watch 來監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒有 watch 的。
React中比較復(fù)雜，但是我們?nèi)绻朐?React 中實(shí)現(xiàn)一個(gè)類似 Vue 的 watch 監(jiān)聽屬性，也不是沒有辦法。
在React類組件中實(shí)現(xiàn)watch監(jiān)聽屬性
我們可以使用 componentDidUpdate 函數(shù)來監(jiān)聽組件屬性的變化，來模擬于 Vue 中的watch。
例如，我們有一個(gè)組件 MyComponent，其中有一個(gè)屬性 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ā)生變化時(shí)，就可以執(zhí)行某些操作，例如打印日志。
需要注意的是，在 componentDidUpdate 函數(shù)中，我們還需要比較 prevprops 和 this.props ，以確保只有 name 屬性發(fā)生變化時(shí)才會(huì)執(zhí)行我們的操作：
componentDidUpdate(prevProps, prevState) {
if (prevProps.name !== this.props.name || prevState.name !== this.state.name) {
console.log('Name changed to:', this.state.name)
}
}這樣我們就可以在 React 類組件中實(shí)現(xiàn)類似于 Vue 中 watch 的功能，監(jiān)聽組件屬性的變化并執(zhí)行相應(yīng)的操作。
在React函數(shù)組件中實(shí)現(xiàn)watch監(jiān)聽屬性
在 React 中默認(rèn)函數(shù)組件不能使用生命周期。需要配合 React16.8新增的 Hook -- useEffect 才能實(shí)現(xiàn)。
使用 React 實(shí)現(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對(duì)象的name屬性的變化
useEffect(() => {
console.log(`name: ${data.name}`);
}, [data.name]); 3、監(jiān)聽屬性的變化
// 修改data對(duì)象的name屬性的值
setData({...data, name: 'Lucy'}); 當(dāng)data對(duì)象的name屬性發(fā)生改變時(shí)，useEffect 會(huì)觸發(fā)執(zhí)行其回調(diào)函數(shù)，并打印出新的值。
需要注意的是，由于React 中所有組件狀態(tài)都是不可變的，所以我們?cè)谛薷囊O(jiān)聽的屬性時(shí)需要使用深拷貝，確保不會(huì)影響到原始的值。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react中使用useEffect及踩坑記錄，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比,主要增加了兩個(gè)特性：事件代理、和事件自動(dòng)綁定,本文主要介紹了React 組件中實(shí)現(xiàn)事件代理,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
本篇文章主要介紹了ReactNative列表ListView的用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的示例代碼
因?yàn)?react、vue都是單頁(yè)面應(yīng)用,路由跳轉(zhuǎn)時(shí),就會(huì)銷毀上一個(gè)頁(yè)面的組件,但是有些項(xiàng)目不想被銷毀,想保存狀態(tài),本文給大家介紹了React實(shí)現(xiàn)頁(yè)面狀態(tài)緩存(keep-alive)的代碼示例,需要的朋友可以參考下2024-01-01
react中使用redux-persist做持久化儲(chǔ)存的過程記錄
這篇文章主要介紹了react中使用redux-persist做持久化儲(chǔ)存的相關(guān)資料,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
關(guān)于react-router中的Prompt組件使用心得
這篇文章主要介紹了關(guān)于react-router中的Prompt組件學(xué)習(xí)心得,Prompt組件作用是,在用戶準(zhǔn)備離開該頁(yè)面時(shí),?彈出提示,?返回true或者false,?如果為true,?則離開頁(yè)面,?如果為false,?則停留在該頁(yè)面，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-01-01
Input標(biāo)簽自動(dòng)校驗(yàn)功能去除實(shí)現(xiàn)
這篇文章主要為大家介紹了Input標(biāo)簽的自動(dòng)拼寫檢查功能去除實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
React類組件和函數(shù)組件對(duì)比-Hooks的簡(jiǎn)介
Hook?是?React?16.8?的新增特性，它可以讓我們?cè)诓痪帉慶lass的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對(duì)比-Hooks的介紹及初體驗(yàn),需要的朋友可以參考下2022-11-11
React 條件渲染最佳實(shí)踐小結(jié)(7種)
這篇文章主要介紹了React 條件渲染最佳實(shí)踐小結(jié)(7種)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
詳解使用create-react-app快速構(gòu)建React開發(fā)環(huán)境
這篇文章主要介紹了詳解使用create-react-app快速構(gòu)建React開發(fā)環(huán)境,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05