快捷導(dǎo)航

React如何實(shí)現(xiàn)Vue的watch監(jiān)聽屬性

更新時(shí)間：2023年06月02日 11:20:35 作者：一只小可樂(lè)吖

在 Vue 中可以簡(jiǎn)單地使用 watch 來(lái)監(jiān)聽數(shù)據(jù)的變化，還能獲取到改變前的舊值，而在 React 中是沒(méi)有 watch 的，今天通過(guò)本文給大家講解React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的方法,需要的朋友可以參考下

在React類組件中實(shí)現(xiàn)watch監(jiān)聽屬性

我們可以使用 componentDidUpdate 函數(shù)來(lái)監(jiān)聽組件屬性的變化，來(lái)模擬于 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)聽屬性可以通過(guò)使用 useEffect hook來(lái)完成。

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ì)影響到原始的值。

到此這篇關(guān)于React實(shí)現(xiàn)Vue的watch監(jiān)聽屬性的文章就介紹到這了,更多相關(guān)Reactwatch監(jiān)聽屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: