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

更新時間：2025年07月11日 10:58:53 作者：藍精靈001

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

1. 基礎(chǔ)實現(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]);
}

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

2. 增加immediate選項

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]);
}

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

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;
  };
}

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

4. 使用lodash進行深度比較

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]);
}

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