当前位置：首页 > React

react如何监听一个值发生改变

2026-01-26 08:28:45React

监听值变化的常用方法

在React中监听值变化可以通过以下几种方式实现，具体选择取决于使用场景（如类组件、函数组件或状态管理需求）。

使用 `useEffect` 钩子（函数组件）

通过 useEffect 监听依赖项的变化，适合函数组件中监听状态或props的变化。

import React, { useState, useEffect } from 'react';

function Example() {
  const [value, setValue] = useState('initial');

  useEffect(() => {
    console.log('值变化:', value);
    // 执行副作用逻辑
  }, [value]); // 依赖项为value

  return (
    <button onClick={() => setValue('updated')}>更新值</button>
  );
}

类组件中的 `componentDidUpdate`

在类组件中，通过生命周期方法 componentDidUpdate 监听props或state的变化。

class Example extends React.Component {
  state = { value: 'initial' };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.value !== this.state.value) {
      console.log('值变化:', this.state.value);
    }
  }

  render() {
    return (
      <button onClick={() => this.setState({ value: 'updated' })}>
        更新值
      </button>
    );
  }
}

使用自定义Hook封装监听逻辑

将监听逻辑抽象为可复用的自定义Hook，适用于多处需要相同监听逻辑的场景。

function useValueChangeListener(value, callback) {
  const prevValueRef = React.useRef(value);

  React.useEffect(() => {
    if (prevValueRef.current !== value) {
      callback(value, prevValueRef.current);
      prevValueRef.current = value;
    }
  }, [value, callback]);
}

// 使用示例
function Component() {
  const [count, setCount] = useState(0);
  useValueChangeListener(count, (newVal, oldVal) => {
    console.log(`从 ${oldVal} 变为 ${newVal}`);
  });

  return <button onClick={() => setCount(count + 1)}>增加</button>;
}

通过状态管理库监听（如Redux）

在Redux中，可以通过订阅store或使用中间件（如redux-saga）监听状态变化。

// Redux store订阅示例
store.subscribe(() => {
  const currentValue = store.getState().someValue;
  console.log('Redux状态变化:', currentValue);
});

// 在React组件中结合useSelector（React-Redux）
import { useSelector } from 'react-redux';
function ReduxComponent() {
  const value = useSelector(state => state.someValue);
  useEffect(() => {
    console.log('Redux值变化:', value);
  }, [value]);
}

使用 `useRef` 对比前值

通过 useRef 保存上一次的值，手动比较变化。

react如何监听一个值发生改变

function Component() {
  const [value, setValue] = useState(0);
  const prevValue = useRef(value);

  if (prevValue.current !== value) {
    console.log('值变化:', value);
    prevValue.current = value;
  }

  return <button onClick={() => setValue(value + 1)}>+1</button>;
}