react如何监控state
监控 React state 的方法
使用 useEffect 钩子
在函数组件中，可以通过 useEffect 监听 state 的变化。传入依赖数组（第二个参数）指定需要监听的 state 变量。当依赖项变化时，useEffect 内的回调会触发。
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Count changed:', count);
}, [count]); // 仅在 count 变化时执行类组件中的 componentDidUpdate
在类组件中，可以通过生命周期方法 componentDidUpdate 监控 state 变化。通过比较 prevState 和当前 this.state 判断具体变化的 state 字段。
componentDidUpdate(prevProps, prevState) {
if (prevState.count !== this.state.count) {
console.log('Count changed:', this.state.count);
}
}自定义 Hook 封装监听逻辑
可以创建自定义 Hook 复用 state 监听逻辑。例如，封装一个 useStateChangeLogger 用于打印 state 变化：
function useStateChangeLogger(state, label = 'State') {
useEffect(() => {
console.log(`${label} updated:`, state);
}, [state, label]);
}
// 使用示例
const [user, setUser] = useState(null);
useStateChangeLogger(user, 'User');使用 Redux 或 Context API 的中间件
若 state 通过 Redux 管理，可使用中间件（如 redux-logger）监控变化。对于 Context API，可通过在 Provider 中包裹监听逻辑实现类似效果。
开发工具辅助
React DevTools 的 "Profiler" 选项卡可记录组件渲染和 state 变化。结合 useDebugValue 可在 DevTools 中直接显示自定义 Hook 的调试信息。
注意事项
- 避免在监听逻辑中直接修改 state，可能导致无限循环。
- 性能敏感场景下，可通过
useMemo或useCallback优化依赖项变化频率。
