当前位置：首页 > React

React如何监听数据

2026-02-12 01:50:52React

监听数据变化的方法

在React中，监听数据变化通常通过组件的状态（state）和属性（props）管理机制实现。React的核心思想是数据驱动视图，当数据发生变化时，组件会自动重新渲染。

使用useState和useEffect

useState用于定义组件内部状态，useEffect用于监听状态变化并执行副作用。当状态更新时，组件会重新渲染。

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

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

  useEffect(() => {
    console.log('Count changed:', count);
  }, [count]); // 仅在count变化时触发

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

使用useReducer

useReducer适用于复杂状态逻辑，可以集中管理状态变化并监听。

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

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      throw new Error();
  }
}

function ExampleComponent() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  useEffect(() => {
    console.log('State changed:', state);
  }, [state]); // 监听整个state对象

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      Click me
    </button>
  );
}

监听props变化

父组件传递的props变化时，子组件可以通过useEffect监听。

import React, { useEffect } from 'react';

function ChildComponent({ value }) {
  useEffect(() => {
    console.log('Props value changed:', value);
  }, [value]); // 监听props.value的变化

  return <div>{value}</div>;
}

使用Context API

通过useContext监听全局状态变化，适用于跨组件数据共享。

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

const MyContext = React.createContext();

function ParentComponent() {
  const [value, setValue] = useState('default');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { value } = useContext(MyContext);

  useEffect(() => {
    console.log('Context value changed:', value);
  }, [value]); // 监听context中的value变化

  return <div>{value}</div>;
}

自定义Hook监听数据

封装自定义Hook实现复用逻辑，例如监听窗口大小变化。

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []); // 空依赖表示仅在挂载和卸载时执行

  return size;
}