React 组件之间通信之门，推开大道畅无忧

2023-12-26 00:14:14

在 React 中，组件之间的通信至关重要，它使组件能够交换数据和事件，从而实现复杂而交互式的用户界面。在本文中，我们将探索 React 中组件通信的各种方式，包括子组件到父组件的通信、父组件到子组件的通信以及任意组件之间的通信。

子组件到父组件的通信

子组件到父组件的通信通常用于将子组件中的数据或事件传递给父组件。有以下几种方法可以实现：

自定义事件

自定义事件是 React 中最常用的组件通信方式之一。它允许子组件通过触发自定义事件来通知父组件。父组件可以通过注册监听器来接收这些事件，并在事件触发时做出响应。

以下是一个使用自定义事件实现子组件到父组件通信的示例：

// 子组件
import React from "react";

const ChildComponent = () => {
  const handleClick = () => {
    // 创建自定义事件
    const event = new CustomEvent("myCustomEvent", {
      detail: {
        message: "Hello from child component!",
      },
    });

    // 触发自定义事件
    window.dispatchEvent(event);
  };

  return (
    <button onClick={handleClick}>Send Message to Parent</button>
  );
};

export default ChildComponent;


// 父组件
import React, { useState } from "react";

const ParentComponent = () => {
  const [message, setMessage] = useState("");

  // 注册监听器来接收自定义事件
  window.addEventListener("myCustomEvent", (event) => {
    // 获取事件中的数据
    const { message } = event.detail;

    // 更新状态
    setMessage(message);
  });

  return (
    <div>
      <h1>Message from Child Component: {message}</h1>
      <ChildComponent />
    </div>
  );
};

export default ParentComponent;

属性传递

属性传递是一种简单而直接的组件通信方式。它允许父组件通过向子组件传递属性的方式来传递数据。子组件可以通过访问这些属性来获取数据。

以下是一个使用属性传递实现子组件到父组件通信的示例：

// 子组件
import React from "react";

const ChildComponent = ({ message }) => {
  return (
    <div>
      <h1>Message from Parent Component: {message}</h1>
    </div>
  );
};

export default ChildComponent;


// 父组件
import React from "react";

const ParentComponent = () => {
  const message = "Hello from parent component!";

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
};

export default ParentComponent;

父组件到子组件的通信

父组件到子组件的通信通常用于将父组件中的数据或事件传递给子组件。有以下几种方法可以实现：

函数回调

函数回调是一种常见的父组件到子组件的通信方式。它允许父组件通过向子组件传递一个函数作为属性，然后在子组件中调用该函数来传递数据或触发事件。

以下是一个使用函数回调实现父组件到子组件通信的示例：

// 子组件
import React from "react";

const ChildComponent = ({ onMessageReceived }) => {
  const handleClick = () => {
    // 调用父组件传递的函数
    onMessageReceived("Hello from child component!");
  };

  return (
    <button onClick={handleClick}>Send Message to Parent</button>
  );
};

export default ChildComponent;


// 父组件
import React, { useState } from "react";

const ParentComponent = () => {
  const [message, setMessage] = useState("");

  const onMessageReceived = (message) => {
    // 收到子组件传递的数据
    setMessage(message);
  };

  return (
    <div>
      <h1>Message from Child Component: {message}</h1>
      <ChildComponent onMessageReceived={onMessageReceived} />
    </div>
  );
};

export default ParentComponent;

属性更新

属性更新是一种简单的父组件到子组件的通信方式。它允许父组件通过更新子组件的属性来传递数据。子组件可以通过监听属性的变化来获取数据。

以下是一个使用属性更新实现父组件到子组件通信的示例：

// 子组件
import React, { useEffect } from "react";

const ChildComponent = ({ message }) => {
  useEffect(() => {
    // 在属性变化时触发副作用
    console.log("Message changed:", message);
  }, [message]);

  return (
    <div>
      <h1>Message from Parent Component: {message}</h1>
    </div>
  );
};

export default ChildComponent;


// 父组件
import React, { useState } from "react";

const ParentComponent = () => {
  const [message, setMessage] = useState("Hello from parent component!");

  setTimeout(() => {
    // 更新属性
    setMessage("Updated message from parent component!");
  }, 2000);

  return (
    <div>
      <ChildComponent message={message} />
    </div>
  );
};

export default ParentComponent;

任意组件之间的通信

除了上述的子组件到父组件和父组件到子组件的通信方式之外，React 还提供了多种方式来实现任意组件之间的通信。这些方式包括：

Context API

Context API是一种内置的 React API，它允许在整个应用中共享状态。通过使用 Context API，组件可以访问父组件中定义的状态，而不需要一层一层地传递属性。

以下是一个使用 Context API实现任意组件之间的通信的示例：

// 创建 Context
import React, { createContext, useContext } from "react";

const MyContext = createContext();

// 定义组件 A，它将提供共享状态
const ComponentA = () => {
  const [state, setState] = useState("Hello from component A!");

  return (
    <MyContext.Provider value={state}>
      <ComponentB />
    </MyContext.Provider>
  );
};


// 定义组件 B，它将使用共享状态
const ComponentB = () => {
  const state = useContext(MyContext);

  return (
    <div>
      <h1>Message from Component A: {state}</h1>
    </div>
  );
};

PubSub

PubSub是一种发布-订阅模式，它允许组件之间互相发送和接收事件。组件可以通过订阅特定的事件，并在事件触发时执行相应的操作。

以下是一个使用 PubSub实现任意组件之间的通信的示例：

// 创建事件总线
import { EventEmitter } from "events";

const eventBus = new EventEmitter();

// 定义组件 A，它将发布事件
const ComponentA = () => {
  const handleClick = () => {
    // 发布事件
    eventBus.emit("myEvent", { message: "Hello from component A!" });
  };

  return (
    <button onClick={handleClick}>Send Message to Component B</button>
  );
};


// 定义组件 B，它将订阅事件
const ComponentB = () => {
  useEffect(() => {
    // 订阅事件
    eventBus.on("myEvent", (data) => {
      console.log("Received message:", data.message);
    });

    // 在组件卸载时取消订阅
    return () => {
      eventBus.off("myEvent");
    };
  }, []);

  return (
    <div>
      <h1>Message from Component A: (waiting for message)</h1>
    </div>
  );
};