react如何实现watch
实现 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 或类似方案。
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>
);
}性能优化注意事项
- 避免在依赖数组中包含不必要的值
- 对于复杂计算，考虑使用
useMemo缓存结果 - 在不需要时及时清理副作用（返回清理函数）
- 对于频繁更新的状态，考虑使用防抖或节流
以上方法可以根据具体需求选择使用，简单场景使用 useEffect 即可，复杂场景可以考虑自定义 Hook 或第三方库。
