1. 父子组件通信
这是最常见的通信方式。父组件通过 props 向子组件传递数据，子组件通过回调函数向父组件传递数据。
父组件向子组件传递数据：
function Parent() {
const data = "Hello from Parent";
return <Child message={data} />;
}
function Child(props) {
return <div>{props.message}</div>;
}
在这个例子中，Parent 组件通过 message 属性将数据传递给 Child 组件。
子组件向父组件传递数据：
function Parent() {
const handleMessage = (message) => {
console.log("Message from Child:", message);
};
return <Child onSendMessage={handleMessage} />;
}
function Child(props) {
const sendMessage = () => {
props.onSendMessage("Hello from Child");
};
return <button onClick={sendMessage}>Send Message</button>;
}
在这个例子中，Child 组件通过调用 props.onSendMessage 回调函数，将数据传递给 Parent 组件。
2. 兄弟组件通信
兄弟组件之间的通信通常需要通过共同的父组件来实现。父组件作为中间人，接收一个子组件的数据，然后通过 props 传递给另一个子组件。
function Parent() {
const [message, setMessage] = React.useState("");
const handleMessage = (msg) => {
setMessage(msg);
};
return (
<div>
<ChildA onSendMessage={handleMessage} />
<ChildB message={message} />
</div>
);
}
function ChildA(props) {
const sendMessage = () => {
props.onSendMessage("Hello from ChildA");
};
return <button onClick={sendMessage}>Send Message</button>;
}
function ChildB(props) {
return <div>{props.message}</div>;
}
在这个例子中，ChildA 组件通过 onSendMessage 回调函数将数据传递给 Parent 组件，然后 Parent 组件通过 message 属性将数据传递给 ChildB 组件。
3. 跨层级组件通信
当组件层级较深时，直接通过 props 传递数据会变得非常繁琐。这时可以使用 Context API 或者 状态管理库（如 Redux、MobX）来实现跨层级组件通信。
使用 Context API：
const MyContext = React.createContext();
function Parent() {
const data = "Hello from Context";
return (
<MyContext.Provider value={data}>
<Child />
</MyContext.Provider>
);
}
function Child() {
const data = React.useContext(MyContext);
return <div>{data}</div>;
}
在这个例子中，Parent 组件通过 MyContext.Provider 提供数据，Child 组件通过 useContext 钩子来消费数据。
4. 兄弟组件或任意组件通信（使用状态管理库）
对于更复杂的场景，比如兄弟组件或任意组件之间的通信，可以使用状态管理库（如 Redux、MobX）来管理全局状态。这些库允许你在任何组件中访问和修改共享的状态。
使用 Redux 的简单示例：
// 假设已经配置好了 Redux store
import { useSelector, useDispatch } from 'react-redux';
function Parent() {
return (
<div>
<ChildA />
<ChildB />
</div>
);
}
function ChildA() {
const dispatch = useDispatch();
const sendMessage = () => {
dispatch({ type: 'SEND_MESSAGE', payload: 'Hello from ChildA' });
};
return <button onClick={sendMessage}>Send Message</button>;
}
function ChildB() {
const message = useSelector((state) => state.message);
return <div>{message}</div>;
}
在这个例子中，ChildA 组件通过 dispatch 发送一个 action，Redux store 更新状态后，ChildB 组件通过 useSelector 获取最新的状态。
总结
• 父子组件通信：父组件通过 props传递数据给子组件，子组件通过回调函数传递数据给父组件。
• 兄弟组件通信：通过共同的父组件作为中间人传递数据。
• 跨层级组件通信：使用 Context API 或状态管理库（如 Redux）。
• 任意组件通信：使用状态管理库（如 Redux、MobX）来管理全局状态。
希望这些解释对你有帮助！随着你对 React 的深入学习，你会逐渐掌握这些通信方式的更多细节和最佳实践。
