当前位置：首页 > React

react组件如何通讯

2026-03-30 18:35:48React

组件通讯方式

父组件向子组件传递数据
通过props传递数据，子组件通过this.props（类组件）或函数参数（函数组件）接收。父组件更新props会触发子组件重新渲染。

子组件向父组件传递数据
父组件通过props传递回调函数给子组件，子组件调用该函数并传入参数。父组件在回调中处理子组件的数据。

兄弟组件通讯
通过共同的父组件作为中介，子组件A通过父组件回调更新状态，状态通过props传递给子组件B。

跨层级通讯

Context API
使用React.createContext创建上下文，Provider提供数据，子组件通过Consumer或useContext钩子消费数据。适合跨多层级组件共享状态。

状态管理库（Redux/MobX）
集中管理全局状态，组件通过connect或useSelector获取状态，通过dispatch或action更新状态。适合复杂应用的状态共享。

事件总线模式

自定义事件系统
利用EventEmitter或PubSub库实现发布订阅模式，组件通过事件名监听和触发事件。灵活性高但需注意事件命名冲突。

代码示例

父传子

// 父组件
<ChildComponent message="Hello" />

// 子组件
function ChildComponent({ message }) {
  return <div>{message}</div>;
}

子传父

// 父组件
function Parent() {
  const handleData = (data) => console.log(data);
  return <Child onData={handleData} />;
}

// 子组件
function Child({ onData }) {
  return <button onClick={() => onData("Child Data")}>Send</button>;
}

Context API

react组件如何通讯

const ThemeContext = React.createContext();

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <Button />;
}

function Button() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>Click</button>;
}