React组件通信方式（父传子，兄弟组件，子传父）

在 React 中，组件间的通信是构建交互式应用的核心。以下是三种主要的通信方式及其实际例子：

父传子（Parent-to-Child）

父传子是最常见的通信方式，通过 props 将数据从父组件传递到子组件。

// 父组件
function ParentComponent() {
    const message = "Hello from Parent";
    return <ChildComponent message={message} />;
}

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

在这个例子中，ParentComponent 通过 props 将 message 传递给 ChildComponent。

兄弟组件

兄弟组件之间的通信通常需要一个共同的父组件来协调，或者使用状态提升技术。

// 父组件
function ParentComponent() {
    const [message, setMessage] = useState("Hello from Parent");
    return (
        <>
            <SiblingComponentA message={message} setMessage={setMessage} />
            <SiblingComponentB />
        </>
    );
}

// 兄弟组件 A
function SiblingComponentA({ message, setMessage }) {
    return (
        <div>
            {message}
            <button onClick={() => setMessage("Updated by Component A")}>
                Update Message
            </button>
        </div>
    );
}

// 兄弟组件 B
function SiblingComponentB() {
    return <div>The message is: {props.message}</div>;
}

在这个例子中，SiblingComponentA 和 SiblingComponentB 通过父组件 ParentComponent 来通信。SiblingComponentA 可以通过 setMessage 更新状态，而 SiblingComponentB 显示状态。

子传父（Child-to-Parent）

子传父通信通常通过回调函数来实现，子组件将数据传递给父组件。

// 父组件
function ParentComponent() {
    const [message, setMessage] = useState("Initial Message");
    return (
        <div>
            <ChildComponent onMessageChange={setMessage} />
            <p>The message is: {message}</p>
        </div>
    );
}

// 子组件
function ChildComponent({ onMessageChange }) {
    const [childMessage, setChildMessage] = useState("Hello from Child");
    const handleSubmit = () => {
        onMessageChange(childMessage);
    };
    return (
        <div>
            <input
                value={childMessage}
                onChange={(e) => setChildMessage(e.target.value)}
            />
            <button onClick={handleSubmit}>Submit</button>
        </div>
    );
}

在这个例子中，ChildComponent 通过 onMessageChange 回调函数将子组件的消息传递给父组件 ParentComponent。

这些通信模式是 React 应用中的基础，通过它们可以实现复杂的数据流和状态管理。在实际的开发中，你可能还会使用 Context API、Redux、MobX 等状态管理库来处理更复杂的场景。

那么，如何使用Context API来实现跨组件的通信呢？
如何使用Context API来实现跨组件的通信呢？