快捷導(dǎo)航

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

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

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

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)聽值變化并執(zhí)行回調(diào)，同時(shí)提供舊值。
使用場景：適用于大多數(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)。
使用場景：當(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)閉。
使用場景：適用于需要在某些條件下動(dòng)態(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]);
}

特點(diǎn)：使用lodash的isEqual方法進(jìn)行深度比較，確保監(jiān)聽的值是真正發(fā)生變化時(shí)才執(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;

總結(jié)

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

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

您可能感興趣的文章: