当前位置：首页 > React

react如何通知数据

2026-01-23 18:30:15React

数据通知机制

React中数据通知通常通过状态管理和事件传递实现，核心在于让组件感知数据变化并触发重新渲染。以下是几种主流方法：

状态提升（State Lifting）

将共享状态提升到最近的共同父组件，通过props向下传递数据及更新函数。子组件调用父组件传递的回调函数触发状态更新：

react如何通知数据

function Parent() {
  const [count, setCount] = useState(0);
  return <Child count={count} onUpdate={() => setCount(c => c + 1)} />;
}

function Child({ count, onUpdate }) {
  return <button onClick={onUpdate}>Count: {count}</button>;
}

Context API

跨层级组件共享状态时，使用Context提供全局可访问的数据和更新方法：

const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <DeepChild />
    </CountContext.Provider>
  );
}

function DeepChild() {
  const { count, setCount } = useContext(CountContext);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

状态管理库（Redux/Zustand）

使用第三方库集中管理状态，通过订阅机制通知组件：

react如何通知数据

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

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch({ type: 'INCREMENT' })}>
      {count}
    </button>
  );
}

自定义事件总线

创建全局事件发射器实现发布订阅模式：

const EventBus = new EventEmitter();

function ComponentA() {
  EventBus.emit('dataUpdate', { newData: 123 });
}

function ComponentB() {
  const [data, setData] = useState(null);
  useEffect(() => {
    EventBus.on('dataUpdate', setData);
    return () => EventBus.off('dataUpdate', setData);
  }, []);
  return <div>{data?.newData}</div>;
}

副作用监听（useEffect）

通过useEffect监听特定状态变化执行副作用：

function DataConsumer({ data }) {
  useEffect(() => {
    console.log('数据已更新:', data);
    // 执行通知相关操作
  }, [data]); // 依赖项变化时触发
  return <div>{data}</div>;
}