当前位置：首页 > React

react实现数据监听

2026-01-26 20:06:32React

实现数据监听的方法

React 中实现数据监听可以通过多种方式，以下是几种常见的实现方法：

使用 React 的 `useEffect` Hook

useEffect 是 React 提供的 Hook，用于监听数据变化并执行副作用。通过指定依赖项数组，可以在依赖项变化时触发回调。

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Data changed:', data);
  }, [data]); // 依赖项为 data

  return (
    <button onClick={() => setData('new value')}>
      Update Data
    </button>
  );
}

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

可以封装一个自定义 Hook，用于监听数据变化并执行回调函数。

import { useEffect, useRef } from 'react';

function useWatch(value, callback) {
  const prevValue = useRef(value);

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

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

  useWatch(count, (newVal, oldVal) => {
    console.log(`Count changed from ${oldVal} to ${newVal}`);
  });

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

使用第三方状态管理库

如果项目中使用 Redux 或 MobX 等状态管理库，可以利用其内置的监听机制。

Redux 示例：

import { useSelector } from 'react-redux';

function Example() {
  const data = useSelector(state => state.data);

  // data 变化时会触发组件重新渲染
  return <div>{data}</div>;
}

MobX 示例：

import { observer } from 'mobx-react-lite';
import { observable } from 'mobx';

const store = observable({
  data: 'initial value',
});

const Example = observer(() => {
  return (
    <div>
      {store.data}
      <button onClick={() => store.data = 'new value'}>
        Update
      </button>
    </div>
  );
});

使用 `useReducer` 和 Context API

对于复杂的状态逻辑，可以结合 useReducer 和 Context API 实现数据监听。

import { createContext, useContext, useReducer } from 'react';

const DataContext = createContext();

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, { data: 'initial' });

  return (
    <DataContext.Provider value={{ state, dispatch }}>
      {children}
    </DataContext.Provider>
  );
}

function Consumer() {
  const { state, dispatch } = useContext(DataContext);

  return (
    <div>
      {state.data}
      <button onClick={() => dispatch({ type: 'UPDATE', payload: 'new' })}>
        Update
      </button>
    </div>
  );
}