React自定義實現useWatch的方式和特點
更新時間：2025年05月16日 11:35:57 投稿：mrr
這篇文章主要介紹了React自定義實現useWatch的方式和特點,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
如何實現類似Vue中watch功能的useWatch自定義Hook，以下是幾種常見的實現方式和特點：
1. 基礎實現
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í)行回調，同時提供舊值。
- 使用場景：適用于大多數基本的監(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í)行回調。 - 使用場景：當需要在組件加載時立即執(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)聽的開啟和關閉。
- 使用場景：適用于需要在某些條件下動態(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í)行回調。 - 使用場景：適用于監(jiān)聽復雜數據結構（如對象或數組）的變化。
使用示例
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ān)聽功能，基礎實現就足夠了；如果需要更復雜的控制，如立即執(zhí)行或停止監(jiān)聽，則可以選擇帶有immediate和停止功能的版本。
到此這篇關于React自定義實現useWatch的方式和特點的文章就介紹到這了,更多相關React自定義useWatch內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要為大家介紹了React?Native項目中啟用Hermes引擎實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了React新文檔濫用effect出現的問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要為大家介紹了前端框架react-spring基礎用法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
React函數式組件Hook中的useEffect函數的詳細解析
useEffect是react v16.8新引入的特性。我們可以把useEffect hook看作是componentDidMount、componentDidUpdate、componentWillUnmounrt三個函數的組合2022-10-10
React?Hooks是React?16.8版本引入的新特性,它使得在函數組件中也能夠使用狀態(tài)（state）和其他React特性,本文就來詳細介紹一下React?Hooks項目實戰(zhàn),感興趣的可以了解一下2023-11-11
歡迎來到今天的探險之旅！在這篇博客中,我們將深入了解 React 中神奇的虛擬DOM,并通過一個簡單的例子來揭開其神秘面紗,文中通過代碼示例也講解非常詳細,感興趣的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了React實現pc端的彈出框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
在構建現代Web應用程序時,前端路由是一個不可或缺的部分,今天,我們將討論如何在React中使用React Router來實現頁面導航,在這篇博客中,我們將會探索路由的基本概念,設置React Router,并通過示例代碼來展示如何實現復雜的頁面導航,需要的朋友可以參考下2025-02-02
在現代單頁應用（SPA）中,路由管理是至關重要的一部分,它不僅決定了用戶如何在頁面間切換,還直接影響到整個應用的性能和用戶體驗,這些看似不起眼的問題,往往會導致功能錯亂和性能下降,本篇文章將深入探討在 React 中如何高效監(jiān)聽路由變化,需要的朋友可以參考下2025-01-01