React如何监听数据
监听数据的方法
在React中，监听数据变化通常通过以下几种方式实现，具体选择取决于场景和需求。
使用useEffect钩子
useEffect是React Hooks中用于处理副作用的钩子，可以监听特定状态或属性的变化。
import { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState(null);
useEffect(() => {
console.log('数据发生变化:', data);
// 数据变化时的逻辑
}, [data]); // 依赖数组指定监听的变量
return <div>{data}</div>;
}使用useMemo或useCallback
useMemo和useCallback可以监听依赖项的变化并缓存结果，适用于性能优化场景。
const memoizedValue = useMemo(() => computeExpensiveValue(data), [data]);类组件中的componentDidUpdate
在类组件中，可以通过componentDidUpdate生命周期方法监听数据变化。
componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
console.log('数据发生变化:', this.state.data);
}
}自定义Hooks
封装自定义Hook可以复用监听逻辑，例如监听窗口大小或外部数据源。
function useDataListener(data) {
useEffect(() => {
const handleChange = () => {
console.log('数据更新:', data);
};
handleChange();
}, [data]);
}状态管理库（如Redux、MobX）
在Redux中，可以通过useSelector监听Store中的状态变化；MobX则提供了自动依赖追踪。
// Redux示例
const data = useSelector((state) => state.someData);事件总线或Pub/Sub模式
通过自定义事件系统或第三方库（如EventEmitter）实现跨组件数据监听。
const emitter = new EventEmitter();
emitter.on('dataChange', (newData) => {
console.log('接收到数据:', newData);
});注意事项
- 性能优化：避免在
useEffect中执行昂贵计算，必要时使用依赖数组限制触发条件。 - 内存泄漏：在
useEffect中清理订阅或事件监听，例如返回清理函数。 - 深度比较：对于对象或数组等引用类型，需手动比较内容变化（如使用
lodash/isEqual）。
