react如何监听state的数据对象
监听 React state 数据对象的方法
在 React 中，state 的变化通常通过 setState 或 useState 更新，但直接监听 state 对象的变化需要特定方法。以下是几种常见方案：
使用 useEffect 钩子
通过 useEffect 监听 state 的依赖项变化，适用于函数组件：
import React, { useState, useEffect } from 'react';
function Example() {
const [data, setData] = useState({ key: 'value' });
useEffect(() => {
console.log('State 变化:', data); // 当 data 变化时触发
}, [data]); // 依赖数组指定监听的 state
return <button onClick={() => setData({ key: 'new value' })}>更新</button>;
}类组件中的 componentDidUpdate
在类组件中，通过生命周期方法监听 state 变化：
class Example extends React.Component {
state = { data: { key: 'value' } };
componentDidUpdate(prevProps, prevState) {
if (prevState.data !== this.state.data) {
console.log('State 变化:', this.state.data);
}
}
render() {
return (
<button onClick={() => this.setState({ data: { key: 'new value' } })}>
更新
</button>
);
}
}使用自定义 Hook 封装监听逻辑
复用监听逻辑时，可封装自定义 Hook：
function useWatchState(state, callback) {
const prevStateRef = useRef();
useEffect(() => {
if (prevStateRef.current !== state) {
callback(state, prevStateRef.current);
}
prevStateRef.current = state;
}, [state, callback]);
}
// 使用示例
function Component() {
const [data, setData] = useState({});
useWatchState(data, (newVal, oldVal) => {
console.log('从', oldVal, '变为', newVal);
});
}注意事项
-
浅比较问题：React 默认使用浅比较判断 state 是否变化。若 state 是嵌套对象，直接修改内部属性可能不会触发更新：
// ❌ 错误：不会触发重新渲染或 useEffect data.key = 'new value'; setData(data); // ✅ 正确：创建新对象引用 setData({ ...data, key: 'new value' }); -
性能优化：避免在
useEffect中执行高开销操作，可通过条件判断减少不必要的更新。
监听特定属性的变化
若只需监听对象的某个属性，可在 useEffect 中明确指定依赖：
useEffect(() => {
console.log('key 属性变化:', data.key);
}, [data.key]); // 仅当 data.key 变化时触发以上方法可根据实际场景选择，函数组件推荐使用 useEffect，类组件推荐使用生命周期方法。
