当前位置：首页 > React

react如何实现watch

2026-02-26 16:18:55React

实现 Watch 功能的方法

在 React 中，可以通过多种方式实现类似于 Vue 的 watch 功能，用于监听数据变化并执行相应操作。以下是几种常见方法：

使用 useEffect Hook

useEffect 是 React 提供的 Hook，可以监听依赖项的变化并执行副作用。

import { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('count changed:', count);
    // 执行 count 变化后的操作
  }, [count]); // 依赖数组，只有 count 变化时才会执行

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment: {count}
    </button>
  );
}

使用自定义 Hook 封装

可以创建一个自定义 Hook 来封装 watch 功能，使其更接近 Vue 的使用方式。

import { useEffect, useRef } from 'react';

function useWatch(value, callback) {
  const prevValue = useRef(value);

  useEffect(() => {
    if (prevValue.current !== value) {
      callback(value, prevValue.current);
      prevValue.current = value;
    }
  }, [value, callback]);
}

// 使用示例
function MyComponent() {
  const [count, setCount] = useState(0);

  useWatch(count, (newVal, oldVal) => {
    console.log(`count changed from ${oldVal} to ${newVal}`);
  });

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment: {count}
    </button>
  );
}

使用 useReducer 监听复杂状态

对于复杂状态管理，useReducer 可以更细粒度地控制状态变化。

import { useReducer, useEffect } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  useEffect(() => {
    console.log('state changed:', state);
  }, [state]);

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      Increment: {state.count}
    </button>
  );
}

使用第三方库

一些第三方库提供了更完善的 watch 功能：

MobX - 提供了 observable 和 reaction 功能
Zustand - 状态管理库，支持订阅特定状态变化
react-use - 包含 useWatch 等实用 Hook

// 使用 react-use 的 usePrevious 和 useEffect
import { useState } from 'react';
import { usePrevious, useEffectOnce } from 'react-use';

function MyComponent() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  useEffectOnce(() => {
    if (prevCount !== undefined && prevCount !== count) {
      console.log(`count changed from ${prevCount} to ${count}`);
    }
  });

  return (
    <button onClick={() => setCount(count + 1)}>
      Increment: {count}
    </button>
  );
}

监听对象或数组的深层变化

如果需要监听对象或数组的深层变化，可以使用 useDeepCompareEffect 或类似方案。

react如何实现watch

import { useState } from 'react';
import { useDeepCompareEffect } from 'react-use';

function MyComponent() {
  const [user, setUser] = useState({ name: 'John', age: 30 });

  useDeepCompareEffect(() => {
    console.log('user changed:', user);
  }, [user]);

  return (
    <button onClick={() => setUser({ ...user, age: user.age + 1 })}>
      Increment Age: {user.age}
    </button>
  );
}