当前位置：首页 > React

react如何监听state更新

2026-01-24 16:28:10React

监听 state 更新的方法

在 React 中，监听 state 更新可以通过以下几种方式实现：

使用 useEffect 钩子
useEffect 是 React 提供的钩子函数，可以监听依赖项的变化。当 state 变化时，useEffect 会执行回调函数。

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Count updated:', count);
  }, [count]); // 依赖数组中的 count 变化时会触发回调

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

使用 useState 的回调形式
useState 的更新函数可以接受回调，在 state 更新后执行。

const [count, setCount] = useState(0);

const increment = () => {
  setCount(prevCount => {
    const newCount = prevCount + 1;
    console.log('New count:', newCount);
    return newCount;
  });
};

使用自定义 Hook
可以封装一个自定义 Hook，在 state 更新时触发额外的逻辑。

function useWatchState(initialValue, callback) {
  const [value, setValue] = useState(initialValue);

  const setValueWithCallback = (newValue) => {
    setValue(newValue);
    callback(newValue);
  };

  return [value, setValueWithCallback];
}

// 使用示例
const [count, setCount] = useWatchState(0, (newCount) => {
  console.log('Count changed:', newCount);
});

类组件中的 componentDidUpdate
如果是类组件，可以通过 componentDidUpdate 生命周期方法监听 state 更新。

react如何监听state更新

class Example extends React.Component {
  state = { count: 0 };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log('Count updated:', this.state.count);
    }
  }

  render() {
    return (
      <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Increment Count
      </button>
    );
  }
}