当前位置：首页 > React

react如何通知数据

2026-03-31 01:35:17React

数据通知机制

在React中，数据通知通常指组件间数据变化的传递和响应。以下是几种常见方法：

使用Props传递数据

父组件通过props将数据传递给子组件。当父组件状态更新时，子组件会自动重新渲染。

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

  return <ChildComponent data={data} />;
}

function ChildComponent({ data }) {
  return <div>{data}</div>;
}

使用Context API

Context允许跨组件层级传递数据，无需手动逐层传递props。

react如何通知数据

const DataContext = createContext();

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

  return (
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const { data } = useContext(DataContext);
  return <div>{data}</div>;
}

使用状态管理库

Redux或MobX等库提供集中式状态管理，支持跨组件数据共享和响应式更新。

// Redux示例
import { useSelector } from 'react-redux';

function Component() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}

使用自定义事件

通过自定义事件实现组件间通信，适用于非父子关系的组件。

react如何通知数据

// 事件总线
const EventBus = {
  events: {},
  emit(event, data) {
    if (this.events[event]) this.events[event].forEach(cb => cb(data));
  },
  on(event, callback) {
    this.events[event] = this.events[event] || [];
    this.events[event].push(callback);
  }
};

// 组件A
EventBus.emit('dataUpdate', newData);

// 组件B
EventBus.on('dataUpdate', data => {
  // 处理数据
});

使用回调函数

父组件通过回调函数接收子组件的数据更新。

function ParentComponent() {
  const handleDataUpdate = (newData) => {
    console.log(newData);
  };

  return <ChildComponent onUpdate={handleDataUpdate} />;
}

function ChildComponent({ onUpdate }) {
  const handleClick = () => {
    onUpdate('new data');
  };

  return <button onClick={handleClick}>Update</button>;
}

使用React Hooks

useState和useEffect组合可以实现数据监听和响应。

function Component() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const timer = setInterval(() => {
      setData(Date.now());
    }, 1000);

    return () => clearInterval(timer);
  }, []);

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