快捷導(dǎo)航

React自定義實現(xiàn)useWatch的方式和特點

更新時間：2025年05月16日 11:35:57 投稿：mrr

這篇文章主要介紹了React自定義實現(xiàn)useWatch的方式和特點,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

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)。
使用場景：當(dāng)需要在組件加載時立即執(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進(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]);
}

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