一、React状态监听的核心概念：理解数据驱动视图的本质

1.1 React的响应式模型：状态如何驱动视图更新

React的核心思想是UI是状态的函数映射。当组件内部的state发生变化时，React会自动触发组件的重新渲染，进而更新真实的DOM。在这个过程中，开发者往往需要在状态变化后执行某些特定的逻辑，例如发起网络请求、操作DOM或同步外部系统，这就涉及到了对state变化的监听。

1.2 类组件与函数组件的差异：两种编程范式的对比

在类组件中，状态监听依赖于组件的生命周期方法；而在函数组件中，React Hooks提供了更细粒度的控制。理解这两者的差异，是掌握React中如何监听 state的变化?这一问题的关键。

1.3 监听状态变化的整体流程：数据流转图解

以下是React状态更新触发监听逻辑的整体流程图，清晰地展示了从状态修改到副作用执行的全过程。

二、类组件中监听state的变化：生命周期方法的应用

2.1 使用componentDidUpdate：捕获更新阶段的利器

在类组件中，componentDidUpdate会在组件更新完毕后立即被调用。这是类组件中监听state变化最标准的位置。该方法接收三个参数：prevProps, prevState, snapshot。

2.2 条件判断防止死循环：避免无意义的重复渲染

在componentDidUpdate中直接调用this.setState会导致无限循环。必须通过条件判断，只有当目标state真正发生变化时才执行逻辑。

1. 获取当前的state与prevState进行对比。
2. 如果两者相等，则直接返回，不执行后续逻辑。
3. 如果不相等，执行所需的副作用操作，如网络请求或状态更新。

2.3 完整类组件示例：实现状态变化后的逻辑触发

下面是一个完整的类组件示例，展示了如何监听count状态的变化并在变化时打印日志。

class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidUpdate(prevProps, prevState) { if (prevState.count !== this.state.count) { console.log("count 发生变化，新值为: ", this.state.count); } } increment = () => { this.setState({ count: this.state.count + 1 }); }; render() { return ( <div> <p>Count: {this.state.count}</p> <button onClick={this.increment}>增加</button> </div> ); } }

三、函数组件中监听state的变化：Hooks的灵活运用

3.1 使用useEffect监听状态：函数组件的标准做法

函数组件没有生命周期，但可以使用useEffect Hook。useEffect的第二个参数是一个依赖项数组，当数组中的state发生变化时，useEffect的回调函数就会被触发。这是解答React中如何监听 state的变化?最常用的方案。

1. 在组件内部定义state，例如使用useState。
2. 引入useEffect，并将需要监听的state放入依赖项数组。
3. 在回调函数中编写状态变化后的处理逻辑。

import React, { useState, useEffect } from 'react'; function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log("count 发生变化，新值为: ", count); }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); }

3.2 使用useRef对比前后状态：精准捕捉具体变化

useEffect在初次渲染时也会执行。如果只想在状态真正改变时执行逻辑，可以利用useRef保存上一次的state，手动进行对比。

1. 创建一个useRef实例，初始值为当前state。
2. 在useEffect中，比较ref.current与当前state。
3. 若不同，执行逻辑，并更新ref.current为最新state。

import React, { useState, useEffect, useRef } from 'react'; function Counter() { const [count, setCount] = useState(0); const prevCountRef = useRef(count); useEffect(() => { if (prevCountRef.current !== count) { console.log("count 真正发生变化，旧值: ", prevCountRef.current, " 新值: ", count); prevCountRef.current = count; } }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>增加</button> </div> ); }

3.3 自定义usePrevious Hook：封装可复用的监听逻辑

为了提高代码复用性，可以将上述对比逻辑封装成自定义Hook，名为usePrevious。这样在任何需要监听state变化的地方都可以方便地调用。

import { useRef, useEffect } from 'react'; function usePrevious(value) { const ref = useRef(); useEffect(() => { ref.current = value; }, [value]); return ref.current; }

使用该自定义Hook的示例：

function Counter() { const [count, setCount] = useState(0); const prevCount = usePrevious(count); useEffect(() => { if (prevCount !== undefined && prevCount !== count) { console.log("使用自定义Hook监听到变化，旧值: ", prevCount, " 新值: ", count); } }, [count, prevCount]); return <button onClick={() => setCount(count + 1)}>Count: {count}</button>; }

四、进阶场景与性能优化：避免常见陷阱

4.1 监听复杂对象的变化：深比较与浅比较的权衡

当state是一个复杂对象时，useEffect的浅比较可能无法满足需求。即使对象内容未变，引用地址的改变也会触发useEffect。此时可以使用lodash的isEqual进行深比较，或者使用useDeepCompareEffect。

1. 避免在每次渲染时创建新对象，尽量使用不可变数据的更新方式。
2. 若必须使用深比较，需评估性能开销，避免在大型对象上频繁深比较。
3. 考虑将复杂状态拆分为多个独立的基本类型state。

4.2 避免不必要的副作用执行：依赖项数组的正确配置

在使用useEffect时，如果依赖项数组配置不当，极易引发Bug。例如遗漏依赖项会导致闭包陷阱，获取到旧的state值。

1. 确保所有在useEffect内部使用的外部变量都被列入依赖项数组。
2. 如果只想在特定state变化时执行逻辑，可以将相关逻辑拆分到独立的useEffect中。
3. 借助ESLint的react-hooks/exhaustive-deps规则检查遗漏的依赖。

4.3 异步状态监听的挑战：闭包陷阱与解决方案

在React的函数组件中，每次渲染都会生成一个新的闭包。如果在异步回调中访问state，可能会获取到渲染时的旧值。解决闭包陷阱的常用方法是使用useRef保存最新的state，或者使用useReducer管理复杂状态逻辑，确保状态更新的原子性与一致性。