快捷導(dǎo)航

React自定義實(shí)現(xiàn)useWatch鉤子的示例

更新時(shí)間：2025年07月11日 10:58:53 作者：藍(lán)精靈001

React中實(shí)現(xiàn)類似Vue watch的useWatch Hook,包含基礎(chǔ)監(jiān)聽、立即執(zhí)行、動(dòng)態(tài)停止及深度比較四種方式,適用于不同場(chǎng)景,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1. 基礎(chǔ)實(shí)現(xiàn)

import { useEffect, useRef } from 'react';
 
function useWatch<T>(value: T, callback: (prev?: T) => void) {
  const prev = useRef<T>();
 
  useEffect(() => {
    callback(prev.current);
    prev.current = value;
  }, [value]);
}

特點(diǎn)：簡(jiǎn)單直接，監(jiān)聽值變化并執(zhí)行回調(diào)，同時(shí)提供舊值。
使用場(chǎng)景：適用于大多數(shù)基本的監(jiān)聽需求。

2. 增加immediate選項(xiàng)

import { useEffect, useRef } from 'react';
 
type Config = {
  immediate: boolean;
};
 
function useWatch<T>(value: T, callback: (prev?: T) => void, config: Config = { immediate: false }) {
  const { immediate } = config;
  const prev = useRef<T>();
  const inited = useRef(false);
 
  useEffect(() => {
    const execute = () => callback(prev.current);
 
    if (!inited.current) {
      inited.current = true;
      if (immediate) {
        execute();
      }
    } else {
      execute();
    }
    prev.current = value;
  }, [value]);
}

特點(diǎn)：增加了immediate選項(xiàng)，允許在組件初始化時(shí)立即執(zhí)行回調(diào)。
使用場(chǎng)景：當(dāng)需要在組件加載時(shí)立即執(zhí)行監(jiān)聽邏輯時(shí)非常有用。

3. 增加停止監(jiān)聽功能

import { useEffect, useRef } from 'react';
 
type Config = {
  immediate: boolean;
};
 
function useWatch<T>(value: T, callback: (prev?: T) => void, config: Config = { immediate: false }) {
  const { immediate } = config;
  const prev = useRef<T>();
  const inited = useRef(false);
  const stop = useRef(false);
 
  useEffect(() => {
    const execute = () => callback(prev.current);
 
    if (!stop.current) {
      if (!inited.current) {
        inited.current = true;
        if (immediate) {
          execute();
        }
      } else {
        execute();
      }
      prev.current = value;
    }
  }, [value]);
 
  return () => {
    stop.current = true;
  };
}

特點(diǎn)：增加了停止監(jiān)聽的功能，允許動(dòng)態(tài)控制監(jiān)聽的開啟和關(guān)閉。
使用場(chǎng)景：適用于需要在某些條件下動(dòng)態(tài)停止監(jiān)聽的場(chǎng)景。

4. 使用lodash進(jìn)行深度比較

import { useEffect, useRef } from 'react';
import { isEqual } from 'lodash';
 
function useWatch<T>(value: T, callback: (prev?: T) => void, config: Config = { immediate: false }) {
  const { immediate } = config;
  const prev = useRef<T>();
  const inited = useRef(false);
 
  useEffect(() => {
    const execute = () => {
      if (!isEqual(prev.current, value)) {
        callback(prev.current);
      }
    };
 
    if (!inited.current) {
      inited.current = true;
      if (immediate) {
        execute();
      }
    } else {
      execute();
    }
    prev.current = value;
  }, [value]);
}

特點(diǎn)：使用lodash的isEqual方法進(jìn)行深度比較，確保監(jiān)聽的值是真正發(fā)生變化時(shí)才執(zhí)行回調(diào)。
使用場(chǎng)景：適用于監(jiān)聽復(fù)雜數(shù)據(jù)結(jié)構(gòu)（如對(duì)象或數(shù)組）的變化。

使用示例

import React, { useState } from 'react';
import { useWatch } from './useWatch';
 
function App() {
  const [count, setCount] = useState(0);
 
  useWatch(count, (oldCount) => {
    console.log(`count changed from ${oldCount} to ${count}`);
  }, { immediate: true });
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
 
export default App;

總結(jié)

這些實(shí)現(xiàn)方式各有特點(diǎn)，可以根據(jù)具體需求選擇合適的版本。如果需要簡(jiǎn)單的監(jiān)聽功能，基礎(chǔ)實(shí)現(xiàn)就足夠了；如果需要更復(fù)雜的控制，如立即執(zhí)行或停止監(jiān)聽，則可以選擇帶有immediate和停止功能的版本。

到此這篇關(guān)于React自定義實(shí)現(xiàn)useWatch鉤子的示例的文章就介紹到這了,更多相關(guān)React useWatch鉤子內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: